| home / programming / javascript / ncz / 1 |    [previous] [next] |
|
|
|
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.
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.
| home / programming / javascript / ncz / 1 | [previous] [next] |
The Network for Technology Professionals
Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers
Created: March 27, 2003
Revised: March 21, 2005
URL: http://webreference.com/programming/javascript/ncz/1
