Make Life Easy With Autocomplete Textboxes

Let’s face it: people really don’t enjoy filling out forms, especially when values need to be typed in. That’s why applications like Microsoft Outlook incorporate autocomplete textboxes -- textboxes that examine the first few characters a user has typed, and suggest a word from a given list. Web browsers also work this way when they automatically present a list of URLs as you begin to type a Web address into the address bar.

In this tutorial, with a little bit of JavaScript trickery, we’ll create the same type of behavior in both Internet Explorer (v5.5 and higher) and Mozilla (v1.0 and higher).

Simple Browser Detection

First, we’ll need to do a little browser detection, so here’s some simple code to accomplish that (though of course, you may use your own instead):

var isOpera = navigator.userAgent.indexOf(“Opera”) > -1;
var isIE = navigator.userAgent.indexOf(“MSIE”) > 1 && !isOpera;
var isMoz = navigator.userAgent.indexOf(“Mozilla/5.”) == 0 && !isOpera;

This code is obviously not very robust, but it’s sound enough for our purposes; let’s get to the guts of this project.

Selecting the Textbox

The first step in this process is to create a method that will select certain amounts of text in a textbox. We’ll call this method textboxSelect(), and it will take three parameters. The first parameter is the textbox we want the method to act on; the second parameter, which is optional, is the position in which the selection should begin (if this parameter is omitted, then the entire textbox is selected); the third parameter, also optional, is the position at which the selection should end. If the second parameter is provided but there is no third parameter, the textbox is selected from the start position to the end of the text in the textbox.

We will address the easiest case first: if only one parameter is provided, then we should use the textbox’s native select() method to select all the text in the textbox:

function textboxSelect(oTextbox, iStart, iEnd) {

   switch(arguments.length) {
       case 1:
           oTextbox.select();
           break;
       ...
   }
}

Note that we use the switch statement to determine how many arguments have been filled in. If there’s only 1, that means only oTextbox was provided. Next, we’re going to skip ahead to the case where there are three arguments (with both iStart and iEnd specified). Here, we’ll need to use a browser detect to determine what to do. For Internet Explorer, we’ll make use of a text range.

function textboxSelect (oTextbox, iStart, iEnd) {

   switch(arguments.length) {
       case 1:
           oTextbox.select();
           break;

      case 3:
           
           if (isIE) {
               var oRange = oTextbox.createTextRange();
               oRange.moveStart("character", iStart);
               oRange.moveEnd("character", -oTextbox.value.length + iEnd);      
               oRange.select();                                              
           } else if (isMoz) {
               ...
           }                    
   }
}

In the bold code, we start by creating a text range for the textbox object. The range then has to be set to its starting and ending coordinates. To move the start of the range, we use the moveStart() method. This method takes two parameters: the type of space to move (“character”), and how many of those spaces to move. The moveEnd() method on the next line has the same parameters. The difference here is that moveEnd() requires the second parameter to be a negative number (think of it as moving the end of the selection back one space, back two spaces, etc.).

In order to get this parameter, we take the negative value of the length of the text in the textbox and add to it the iEnd value. So, if iEnd is 8 and the textbox contains 10 characters, the second parameter becomes –2, and the end of the range is moved back two characters. Lastly, we call the select() method to highlight the range in the textbox.

Accomplishing the same thing for Mozilla is actually very easy. Textboxes have a setSelectionRange() method that takes two parameters: the start and end of the selection. We can pass in iStart and iEnd directly:

function textboxSelect (oTextbox, iStart, iEnd) {

   switch(arguments.length) {
       case 1:
           oTextbox.select();
           break;

       case 3:
           
           if (isIE) {
               var oRange = oTextbox.createTextRange();
               oRange.moveStart("character", iStart);
               oRange.moveEnd("character", -oTextbox.value.length + iEnd);      
               oRange.select();                                              
           } else if (isMoz) {
               oTextbox.setSelectionRange(iStart, iEnd);
           }                    
   }
}

Now we’ll take a step back and look at the case when two parameters are given (iEnd is not specified). Essentially, we want to do what we would if there were three arguments, the only difference being that iEnd must be equal to the number of characters in the textbox. We can accomplish this like so:

function textboxSelect (oTextbox, iStart, iEnd) {

   switch(arguments.length) {
       case 1:
           oTextbox.select();
           break;

       /3b#/case 2:
           iEnd = oTextbox.value.length;
           /* falls through */
           
       case 3:          
           if (isIE) {
               var oRange = oTextbox.createTextRange();
               oRange.moveStart("character", iStart);
               oRange.moveEnd("character", -oTextbox.value.length + iEnd);      
               oRange.select();                                              
           } else if (isMoz){
               oTextbox.setSelectionRange(iStart, iEnd);
           }                    
   }
}

Note that in this case, we do not use the break statement. We want the execution to follow through into the next case, as we’ve set iEnd to an appropriate value. This will now work correctly in all three cases.