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:

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:

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 🙂