Creating a Textbox with JavaScript Auto-Complete | 3

Creating a Textbox with JavaScript Auto-Complete

In this method, the code searches downwards through the tree until it reaches the end of the search string. There is a special case here; if there is only one match found and it is exactly the same as the search string that returns zero matches – why bother offering a popup of one word when the text-box already has that word?
An array of matching words is returned by the getStrings method…

  AutoCompleteDB.prototype.getStrings = function(str1, str2, outStr)
  {
      if ( str1 == "" )
      {
          // add matching strings to the array
          if ( this.bEnd )
              outStr.push(str2);

          // get strings for each child node
          for ( var i in this.aStr )
              this.aStr[i].getStrings(str1, str2 + i, outStr);
      }
      else
      {
          // pull the first letter off the string
          var letter = str1.substring(0,1);
          var rest = str1.substring(1,str1.length);

          // and get the case-insensitive matches.
          var lLetter = letter.toLowerCase();
          if ( this.aStr[lLetter] )
              this.aStr[lLetter].getStrings(rest, str2 + lLetter, outStr);

          var uLetter = letter.toUpperCase();
          if ( this.aStr[uLetter] )
              this.aStr[uLetter].getStrings(rest, str2 + uLetter, outStr);
      }
  }

Like the getCount() method, the getStrings() method searches down the tree until it reaches the end of the search string. At this point, the code does a depth-first traversal, adding strings at each node that represents the end of a string.

Finally, all that’s left is to show how the AutoComplete code is used. The following example HTML shows a single text-box used for entering names:

  <html>
  <head>
  <style>
  /* styles used by the AutoComplete class */
  .AutoCompleteBackground
  {
        background-color:white;
  }
  .AutoCompleteHighlight
  {
        background-color:lime;
  }
  </style>

  </script>
  </head>
  <body onload=" createAutoComplete();">
        <div style="position:relative;overflow:visible">
          <input name=theText id="theText" type=text autocomplete=off>
          <div id="theDiv" style="position:absolute;left:0px;top:21px;visibility:hidden;border:solid green   2px;background-color:white;z-index:1"></div>
      </div>
  </body>
  </html>

Note: It’s advisable to set the autocomplete=off attribute on the <input> tag to stop Internet Explorer displaying its own Auto-Complete. The <div> element must have the visibility style set to hidden.

Conclusion

In this article I have presented a method of adding Auto-Complete functionality to a text-box. The AutoComplete class described above accepts an array of strings to use as Auto-Complete suggestions and it adopts a predefined text-box and <div> element to operate with. In this way, the web designer can define the look and feel and placement of the text-box on the page in HTML. When a suitable number of suggestions match the text in the text-box, the AutoComplete object fills the <div> element with the list of matching strings and makes it visible. If the user clicks on one of them, the value in the text-box is changed accordingly.

You might wonder why I didn’t use a <select multiple> element to display the Auto-Complete suggestions. The answer is partly functional and partly aesthetics; the onblur event of the text-box prevents the onchange event on the <select> object making it impossible to select items from the list. Using the <div> element allows little more flexibility in how the popup looks.

For a complete listing of the AutoComplete code, click here.

About the Author

Guyon Roche is a freelance web developer in London, Great Britain. He specializes in Windows platforms with an interest in bridging the gaps between different technologies, visit www.silver-daggers.co.uk for more details. He can be reached via e-mail at guyonroche@silver-daggers.co.uk

Created: March 27, 2003
Revised: April 6, 2004

URL: http://webreference.com/programming/javascript/gr/column5/1

Creating a Textbox with JavaScript Auto-Complete | 3