Creating an Autosuggest Textbox with JavaScript, Part 2 - Page 4
|
|
|
| 2.6/5.0 (97 votes total) |
|
|
|
|
Nicholas C. Zakas
February 11, 2006
|
To handle the up arrow, down arrow, and Enter keys, a handleKeyDown() method is necessary. Similar to handleKeyUp(), this method also requires the event object to be passed in. Once again, you'll need to rely on the key code to tell which key was pressed. The key codes for the up arrow, down arrow, and Enter keys are 38, 40, and 13, respectively. The handleKeyDown() method is defined as follows: AutoSuggestControl.prototype.handleKeyDown = function (oEvent) {
switch(oEvent.keyCode) {
case 38: //up arrow
this.previousSuggestion();
break;
case 40: //down arrow
this.nextSuggestion();
break;
case 13: //enter
this.hideSuggestions();
break;
}
};
Remember, when the user presses the up or down arrows, the suggestion is automatically placed into the textbox. This means that when the Enter key is pressed, you need only hide the dropdown list of suggestions. Updating init()Now that all of this new functionality has been added, it must be initialized. Previously, the init() method was used to set up the onkeyup event handler, now it must be extended to also set up the onkeydown and onblur event handlers, as well as create the dropdown suggestion list. The onkeydown event handler is set up in a similar manner as onkeyup: AutoSuggestControl.prototype.init = function () {
var oThis = this;
this.textbox.onkeyup = function (oEvent) {
if (!oEvent) {
oEvent = window.event;
}
oThis.handleKeyUp(oEvent);
};
this.textbox.onkeydown = function (oEvent) {
if (!oEvent) {
oEvent = window.event;
}
oThis.handleKeyDown(oEvent);
};
//more code to come
};
As you can see, the same algorithm is used with the onkeydown event handler: first determine the location of the event object, then pass it into the handleKeyDown() method. Up to this point, the only way the dropdown list is hidden is when the user hits the Enter key. But what if the user clicks elsewhere on the screen or uses the Tab key to switch to a new form field? To prepare for this, you must set up an onblur event handler that hides the suggestions whenever the textbox loses focus: AutoSuggestControl.prototype.init = function () {
var oThis = this;
this.textbox.onkeyup = function (oEvent) {
if (!oEvent) {
oEvent = window.event;
}
oThis.handleKeyUp(oEvent);
};
this.textbox.onkeydown = function (oEvent) {
if (!oEvent) {
oEvent = window.event;
}
oThis.handleKeyDown(oEvent);
};
this.textbox.onblur = function () {
oThis.hideSuggestions();
};
this.createDropDown();
};
You'll also notice that the createDropDown() method is called to create the initial dropdown list structure. With the initializations complete, it's time to test out your creation. ExampleThe example for the updates is set up in the same way as Part 1. The only difference is in the code that is used and the inclusion of the style sheet: <html>
<head>
<title>Autosuggest Example 2</title>
<script type="text/javascript" src="autosuggest2.js"></script>
<script type="text/javascript" src="suggestions2.js"></script>
<link rel="stylesheet" type="text/css" src="autosuggest.css" />
<script type="text/javascript">
window.onload = function () {
var oTextbox = new AutoSuggestControl(document.getElementById("txt1"), new StateSuggestions());
}
</script>
</head>
<body>
<p><input type="text" id="txt1" /></p>
</body>
</html>
As before, the autosuggest2.js file contains the AutoSuggestControl definition and suggestions2.js contains the StateSuggestions definition. The creation of the AutoSuggestControl is handled in exactly the same way. You can view the example here (it should work in Internet Explorer 5.5+ and Mozilla 1.0+, including Firefox) or download it. With the dropdown list and keyboard controls all working properly, there's only one part left to implement: going back to the server to get the suggestions. We'll examine this in the third and final part of this series. | 
FEEDBACK
COMMENTS
PRINT
SUBMIT TUTORIAL
RSS
Add comment
(Comments: 0)
