Home » Tutorials Advanced Tutorial

Creating an Autosuggest Textbox with JavaScript, Part 1 - Page 3

2.5/5.0 (11 votes total)
Rate:

Nicholas C. Zakas
February 10, 2006


Nicholas C. Zakas
Nicholas C. Zakas is a professional Web designer who specializes in user interface design for Web applications using JavaScript, Dynamic HTML, CSS, XML, and XSLT.


http://www.nczonline.net
Nicholas C. Zakas has written 12 tutorials for JavaScriptSearch.
View all tutorials by Nicholas C. Zakas...

Here's what the handleKeyUp() method looks like so far:

AutoSuggestControl.prototype.handleKeyUp = function (oEvent) {
    var iKeyCode = oEvent.keyCode;

     if (iKeyCode < 32 || (iKeyCode >= 33 && iKeyCode <= 46) || (iKeyCode >= 112 && iKeyCode <= 123)) {
        //ignore
    } else {
        //autosuggest
    }
};

Now you'll know when a character key is pressed. At that point, you need to begin the autosuggest functionality by calling the suggestion provider's requestSuggestions() method and passing a pointer to the autosuggest control as an argument:

AutoSuggestControl.prototype.handleKeyUp = function (oEvent) {
     var iKeyCode = oEvent.keyCode;

     if (iKeyCode < 32 || (iKeyCode >= 33 && iKeyCode <= 46) || (iKeyCode >= 112 && iKeyCode <= 123)) {
        //ignore
    } else {
        this.provider.requestSuggestions(this);
    }
};

Remember, it's the suggestion provider that will call the autosuggest() method defined earlier. The requestSuggestions() method begins the process of retrieving suggestions for usage. When the array of suggestions has been built, it will be passed to autosuggest().

With this method defined, it must be assigned as the event handler for the textbox. It's best to create a separate method to handle initializations for the control such as this (there will be more in the future). The init() method serves this purpose:

AutoSuggestControl.prototype.init = function () {
    var oThis = this;
    this.textbox.onkeyup = function (oEvent) {
        if (!oEvent) {
            oEvent = window.event;
        }
        oThis.handleKeyUp(oEvent);
    };
};

The init() method starts by creating a pointer to the this object so that it may be used later. An anonymous function is defined for the textbox's onkeyup event handler. Inside of this function, the handleKeyUp() method is called using the oThis pointer (using this here would refer to the textbox instead of the autosuggest control).

Since this method requires the event object to be passed in, it's necessary to check for both DOM and IE event objects. The DOM event object is passed in as an argument to the event handler while the IE event object is a property of the window object. Instead of doing a browser detect, you can check to see if the oEvent object is passed into the event handler. If not, then assign window.event into the oEvent variable. The oEvent variable can then be passed directly into the handleKeyUp() event handler.

Lastly, the init() method should be called from within the AutoSuggestControl constructor:

function AutoSuggestControl(oTextbox, oProvider) {
    this.provider = oProvider;
    this.textbox = oTextbox;
    this.init();
}

With the autosuggest control completed, it's time to take a look at creating a suggestion provider.

Building a Suggestion Provider

A suggestion provider is nothing more than an object with a method called requestSuggestions(). This method needs to accept a single argument, which is the autosuggest control to work with. The basic format of a suggestion provider is as follows:

function SuggestionProvider() {
    //any initializations needed go here
}

SuggestionProvider.prototype.requestSuggestions = function (oAutoSuggestControl) {

    var aSuggestions = new Array();

    //determine suggestions for the control
    oAutoSuggestControl.autosuggest(aSuggestions);
};

As you can see, there is very little special code in a suggestion provider. You can provide any sort of initialization in the constructor that is necessary; there are no specific rules about it. The requestSuggestions() method needs only to build an array of suggestions and then pass that array into the autosuggest control's autosuggest() method. It's important that an array is passed to autosuggest() even if it's empty; a null value will cause an error.

Next page


Add commentAdd comment (Comments: 0)  

Advertisement

Partners

Related Resources

Other Resources

arrow