doSearch()

This is the main function. It creates the XMLHttpRequest object which will send requests to countries.cfm page.

The XMLHttpRequest object supports two modes for executing your request: synchronous and asynchronous. Both work well, but the nice thing about asynchronous mode is that it won?t block the user?s browser from performing other tasks. For example, other JavaScript events will be able to be handled, such as onMouseOver events for image rollovers, while the web server is being contacted and communicated with in the background. For these reasons, we?ll go through the small amount of extra effort to implement asynchronous requests instead of synchronous; you are, of course, free to make your own decision, though!

In order to make a request asynchronously, an event handler (or 'callback') function must be defined and passed to the object making the requst. This function will then be called any time the ?ready state? of the request object changes, with the new ready state value passed in as a parameter. The following table lists the possible states and their values:

You will most likely be concerned only with the Complete status (4), but the others come in handy if, for example, you are displaying a progress bar on screen for the user. Once a request reaches the Complete state, the result of the request will be available to you.

Now we have a comma delimited list. We'll format this llist as an HTML table and make DIV countrySuggestItems visible.

function doSearch(searchString) {
    var sugItems = document.getElementById('countrySuggestItems');
    if(searchString.length>0) {
        // creates XMLHttpRequest object
        if (window.XMLHttpRequest) {
            req = new XMLHttpRequest();
        }
        else if (window.ActiveXObject) {
            req = new ActiveXObject("Microsoft.XMLHTTP");
        }
        // request countries.cfm passing searchString as an URL parameter
        req.open("GET", "./countries.cfm?search=" + searchString, true);
        req.send(null);
        // gives the request object an event handler
        req.onreadystatechange = function() {
            if ((req.readyState == 4) && (req.status == 200)) {
                // creates an array from returned list
                var arr = req.responseText.split(',');
                if (arr.length) {
                    // formats array as an HTML table and shows the DIV
                    sugItems.innerHTML = htmlFormat(arr);
                    sugItems.style.display = 'block';
                }
                // No items found? Hides the DIV
                else sugItems.style.display = 'none';
                return;
            };
        }
    }
    // Empty searchString? Hides the DIV
    else sugItems.style.display = 'none';
    return;
}    

Some points to note:

1. req.open("GET", "./countries.cfm?search=" + searchString, true) - The open method accepts three parameters:
   • Request method: either GET or POST
   • URL for the request
   • Asynchronous? true or false
2. req.send(null) - send 'extra' data along with the request. You must do this step for both GET and POST requests. For a GET request, you should just pass null; for a POST, you should pass a properly url-encoded string of name=value pairs
3. req.onreadystatechange = function() - give the request object an event handler as described above

htmlFormat()

We've got search results as a list and we've converted it to an array. We shall use now htmlFormat() function to build an HTML table from this array.

function htmlFormat(arr) {
    // formats arr as an HTML table
    var output = '<table> class="suggestList"';
    for (var i=0;i<arr.length;i++) {
        output = output + '<tr onmouseover="this.style.backgroundColor=0xeeeeee;" 
            onmouseout="this.style.backgroundColor=0xffffff;" 
            onclick="getData(this)">' + '<td>' + arr[i] + '</td>' + '</tr>';
    }
    output = output + '</table>';
    return output;
}

Keep in mind that:

1. <tr onmouseover="this.style.backgroundColor=0xeeeeee;" - changes row background color when mouse pointer is over
2. <tr ... onmouseout="this.style.backgroundColor=0xffffff;" - changes row background color back when mouse pointer is out
3. <tr ... onclick="getData(this)" - calls getData() function when user clicks on a row. The point is: assign the list selected value to country control

getData()

When user selects a row in suggest list, this function is then called. Clicked TR is passed as a parameter. We find the TD (and its value) inside this TR. This value is then assigned to country control and suggest list is made invisible.

function getData(obj) {
    // finds all TDs inside obj
    var arrTD = obj.getElementsByTagName('TD');
    // assigns TD value to form field
    document.getElementById('country').value = arrTD[0].innerHTML;
    // hides the DIV
    document.getElementById('countrySuggestItems').style.display = 'none';
}