HOME  |  AJAX  |  SOLUTIONS  |  TECHNOLOGIES  |  E-COMMERCE  |  ABOUT US
The JavaScript

Now it's time for the interesting AJAX stuff.  We're going to place all of our JavaScript in an external file called ajax_search.js

The first function in this file is one I use everywhere if it involves AJAX.  This function simply returns a browser specific XmlHttpRequest object.
//Gets the browser specific XmlHttpRequest Object
function getXmlHttpRequestObject() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else if(window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
} else {
alert("Your Browser Sucks!\nIt's about time to upgrade don't you think?");
}
}
You can learn more about this function in the AJAX Chat Tutorial and the AJAX Basics.  It will be interesting to see what IE 7 ends up supporting for the XmlHttpObject.

The next peice of JavaScript creates our XmlHttpRequest object that will be used to make the suggestion requests.
//Our XmlHttpRequest object to get the auto suggest
var searchReq = getXmlHttpRequestObject();
Since we only need to make one request at a time we only need one XmlHttpRequest instance unlike the Chat Tutorial where we needed two.

Now we're going to create our function that will actually make the AJAX request.  This function will be called every time a key is released in the search textbox.
//Called from keyup on the search textbox.
//Starts the AJAX request.
function searchSuggest() {
if (searchReq.readyState == 4 || searchReq.readyState == 0) {
var str = escape(document.getElementById('txtSearch').value);
searchReq.open("GET", 'searchSuggest.php?search=' + str, true);
searchReq.onreadystatechange = handleSearchSuggest;
searchReq.send(null);
}
}
First thing that happens in this function is we check to make sure the XmlHttpRequest object is ready to make a request.  This works out well for our Suggest tutorial because it keeps us from making requests quicker than we recieve them.  You can learn more about the different "readyStates" on the XmlHttpProperties page.

The next line gets the contents of the search textbox and URL encodes it with the JavaScript escape function so we can pass it in our URL querystring.

The next like opens the connection to our backend PHP page with the appended search querystring and marks it as a "GET" request.  We could pass this as a "POST", but since security isn't an issue well leave it as a simple "GET"

The next like declares the function (handleSearchSuggest) that will be called when we recieve our AJAX response.  We'll write this in just a second.  Finally we send the request to the server.

The handleSearchSuggest function is called every time the state of our searchReq XmlHttpRequest object changes.
//Called when the AJAX response is returned.
function handleSearchSuggest() {
if (searchReq.readyState == 4) {
var ss = document.getElementById('search_suggest')
ss.innerHTML = '';
var str = searchReq.responseText.split("\n");
for(i=0; i < str.length - 1; i++) {
//Build our element string. This is cleaner using the DOM, but
//IE doesn't support dynamically added attributes.
var suggest = '<div onmouseover="javascript:suggestOver(this);" ';
suggest += 'onmouseout="javascript:suggestOut(this);" ';
suggest += 'onclick="javascript:setSearch(this.innerHTML);" ';
suggest += 'class="suggest_link">' + str[i] + '</div>';
ss.innerHTML += suggest;
}
}
}
Our backend is going to return a list of suggestions in a newline "\n" seperated list.  Since we're just getting a simple list of values back, we are going to pass the response as plain text rather than XML like we did in the AJAX Chat Tutorial

The first thing we do is check to make sure our response is ready. 
if (searchReq.readyState == 4) {
The next line gets a reference to our search_suggest DIV on the HTML page.  This is just a shortcut since we will be adding and removing items from this DIV.
var ss = document.getElementById('search_suggest')
The next line gets the text from the response and splits it up into an array of strings.  We do this using the JavaScript split command.
var str = searchReq.responseText.split("\n");
Now that we have an array of strings from the response, we are going to loop through each one and add a new DIV to our search_suggest.  This can me more elegant in FireFox by using the DOM to create the DIV element, but IE doesn't recognize dynamically added attributes for some reason, so the JavaScript wouldn't work.  Instead we simply construct the DIV as a string and add it to the innerHTML of our search_suggest DIV.

We assign each newly created DIV mouse over, mouse out, and click events.  Each one of these functions will be defined in a minute.  This is an over simplified version, and in a real implementation, we would probably have functions so we could use the arrow keys to select each entry.

That's it for the AJAX part of the JavaScript.  All we have left is to define our functions for our newly suggested items.  The MouseOver and MouseOut functions are just going to change the background color of the suggested item.  We could have this change the text in search textbox if we wanted to.
//Mouse over function
function suggestOver(div_value) {
div_value.className = 'suggest_link_over';
}
//Mouse out function
function suggestOut(div_value) {
div_value.className = 'suggest_link';
}
Finally, we will create a function that sets the text of the search textbox when one of our suggested items are clicked. 
//Click function
function setSearch(value) {
document.getElementById('txtSearch').value = value;
document.getElementById('search_suggest').innerHTML = '';
}
Once an Item is clicked, we are going to remove all of the suggested items, thus making the suggested DIV disappear.