My first AJAX ‘type-ahead suggestion’ function

In a recent project I had to include a search field that would perform a full-text search on a catalog (.nsf). In order to provide a better assistance for the users to find the product they are actually looking for I had in mind to build a ‘type-ahead’ function.

If I am searching on the internet I do not find myself stupid so if I am looking for the latest CD of an artist I already know them by name, I just don’t know the name of the record. And I am not really interested in who produced the album or what record-company released the album. All I know is the artist’s name.

I pressumed that my users already know 70% sure what they are looking for.

In this example I will be using motorcycles as products , a topic I adore 🙂

Maybe it is good how the products are indexed:

search box empty

A product may be indexed under maximum 4 categories, but this is not necessary. For example the Repsol model is delivered in only colorsetting.

After the user has typed in the first three characters a box will appear with the products that have the searchquery somewhere in their articlename:

suggestion box

In this example I search for ‘0RR’ and get all documents with that query in their articlename field.

Easy to implement?

First in the OnKeyPress event of the field I need to invoke the AJAX call:

var charNum = this.value.length

if (charNum>=3){

// 1 visible, 0 hidden

SearchBox(‘searchSuggest’,1)

createAJAXRequest (ExtDBName + “/” + SearchTAView + “?readviewentries&RestrictToCategory=” + UserOrg + “&Count=-1&dummy=’+ new Date().getTime();”,“processSearchValue”);}

  • SearchBox: the suggestion box that pops up with documents (as HREF links) matching the query 
  • readviewentries&RestrictToCategory: in the database example there is a restriction who from which organisation (UserOrg) is entitled to see what document…

Basically this request gets me all the documents in return the user is entitled to see.

The SearchBox function

The SearchBox function shows / hides a certain layer that will be placed just below the search field so the user sees the suggestions change along when he types a query in the search field.

function SearchBox(szDivID, iState) {

// 1 = visible, 0 = hidden

var obj = document.layers ? document.layers[szDivID] :document.getElementById ? document.getElementById(szDivID).style :document.all[szDivID].style;obj.visibility = document.layers ? (iState ? “show” : “hide”) : (iState ? “visible” : “hidden”);}

AJAX request

The AJAX is nothing unusual. Often I use the approach described on SitePoint how to make AJAX call.

The final function that generated the list in the ‘SearchBox’ layer looks like this:

function getProductName(xmlViewData){

// ** handle all the rows in the view

var viewRows = xmlViewData.getElementsByTagName (“viewentry”)

var prodList=“<div id=’ProdList’>”

for (var i=0; i < viewRows.length; i++) {

var prodName = getViewRowValues(viewRows[i])[0] numbQueryValue =

document.forms[0].Tx_SearchField.value

numbQuery = numbQueryValue.length

var searchstring=prodName.toLowerCase()

var searchfor = document.forms[0].Tx_SearchField.value.toLowerCase()

// indexOf -1 means not found

if (searchstring.lastIndexOf(searchfor)!=-1) {

prodList += “<div style=\”margin-top: 2px;\”>” + getViewRowValues(viewRows[i])[0]+ “</div>”

}

}

prodList +=“</div>”

document.getElementById(“XMLSearchArea”).innerHTML = prodList}

 What is does:

  • it checks if the search query is some where found (searchstring.lastIndexOf(searchfor)!=-1) in the first column in the XML object, this is a complete html code containing the <a href>product name</a> code
  • if so, the product is added to the product list
  • and finally the productlist is placed in the innerHTML part of the <div> with ID: XMLSearchArea.

If the user clicks on one of the product results the corresponding document is presented directly on the right, the SearchBox layer is being hidden and the search query remains in the search field.

Via an onFocus event in the searchfield I can directly re-produce the list for the user.

So that was my first setup. Any suggestions or setups are always welcome 🙂

Advertisements

5 thoughts on “My first AJAX ‘type-ahead suggestion’ function

  1. Andres 2007-May-13 / 9:25 am

    Hi Patrick, any possibility to put the files for downloading?
    Look, i`m new in ajax, and i would like to use your searchbox suggestion on my blog (wordpress), i`ve tried to use many others ajax codes without results..

    can u email me back? i really aprecciate your work.

    P.S. I have a holland friend named Martijn, Martijn Krammer.

    Well, See u and thank u

  2. Farvish 2007-May-28 / 10:43 am

    Hi Patrick,
    Please can u put in more clues of how to glue all the code together? a db would be most helpful.
    P.S: I was really impressed by the way u have posted so many informative things that could help us in our domino developement. looking forward for more from you.

    Thanks

  3. Idetrorce 2007-December-15 / 2:59 pm

    very interesting, but I don’t agree with you
    Idetrorce

  4. Mudit 2008-September-22 / 8:02 am

    Hi Patrick,

    Well done…….

    Could you please provide a sample db.

    Thanks in advance…..

  5. www.lasacochehomme.com 2013-July-21 / 5:42 pm

    This is my first time go to see at here and i am actually pleassant to read everthing at alone place.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s