Creating an Autosuggest Textbox with JavaScript, Part 3

Creating an Autosuggest Textbox with JavaScript, Part 3

By Nicholas C. Zakas.

In the second part of this series, you learned how to add a dropdown suggestion list to the autosuggest control that was built in the first part of this series. This article completes the modifications by showing you how to make your suggestions case insensitive and how to get the suggestions back from the server instead of using client-side information.

Case Insensitive Suggestions

I got a lot of feedback from the past two articles asking why the suggestions were case sensitive. The simple answer is that the point of the previous articles was to introduce the methodology for creating the autosuggest control. Now that you understand the basics, it's easy to modify a suggestion provider to make it case insensitive.

The first step is to ensure you are comparing suggestions with the user input in a case insensitive way. The easiest way to do this is by converting both the user input and the possible suggestion to lowercase using the toLowerCase() method and then comparing these two values. If there's a match, then it's time to add the suggestion to the array of possible values.

When a suggestion is made, the first characters are always the ones that the user has typed, so you need to be sure not to lose that. It would be very distracting to a user if he or she typed "mIs" and it was changed to "Mis." Even though the person is typing the state name "Missouri", the suggestion should be "mIssouri." Since there's no way of knowing what case the user is going to be typing in, you're left combining what they just typed with the suggestions you have. To do this, take the user input and add to it the rest of the letters in the suggestion. For example, if the user typed "mIs," and one of the suggestions is "Missouri," you would combine "mIs" and "souri" to give a suggestion of "mIssouri." Here's the code:

StateSuggestions.prototype.requestSuggestions = function (oAutoSuggestControl,
bTypeAhead) {
    var aSuggestions = [];
    var sTextboxValue = oAutoSuggestControl.textbox.value;

    if (sTextboxValue.length > 0){

        var sTextboxValueLC = sTextboxValue.toLowerCase();

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

            var sStateLC = this.states[i].toLowerCase();

            if (sStateLC.indexOf(sTextboxValueLC) == 0) {

                Suggestions.push(sTextboxValue + this.states[i].substring(sTextboxValue.length));
            }
        }
    }

    oAutoSuggestControl.autosuggest(aSuggestions, bTypeAhead);
};

As you can see, this code isn't very different from what was used in the previous article. The addition of case insensitive comparison and the creation of the suggestion only adds a couple of lines of code. You can check out the example to test this functionality.

Remote Suggestions

There's a lot of talk these days about JavaScript remoting, which involves using JavaScript to send information back to the server and then receiving information back. This technique centers around a Microsoft-proprietary object called XMLHttpRequest. Since this object became so widely used by Internet Explorer developers, other browsers have begun to implement it as well. Mozilla-based browsers, such as Firefox, support the object in the exact same way as Internet Explorer. Both Opera and Safari also introduced the XMLHttpRequest object in their most recent releases, though their implementations are a bit buggy (these should be fixed soon). This is the primary technology you will be using in this section.

Created: March 27, 2003
Revised: May 30, 2005

URL: https://webreference.com/programming/javascript/ncz/column3/1