Creating an Autosuggest Textbox with JavaScript, Part 2

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.

Example

The 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.

About the Author

Nicholas C. Zakas is a user interface designer for Web applications and is the author of Professional JavaScript for Web Developers (Wiley Press, ISBN 0764579088). Nicholas can be contacted through his Web site, http://www.nczonline.net/, where he provides open source JavaScript libraries and tools.