If you've read our previous columns, you know that we always define two variables to detect the user's browser:

var NS4 = (document.layers) ? true : false;
var IE4 = (document.all) ? true : false;

NS4 is true if the browser supports the document.layers object. In other words, it is true for Navigator 4.0x. The second variable, IE4, is true if the browser supports the document.all object. That is, it is true for Internet Explorer 4.0x.

Due to a bug in the Macintosh version of Navigator 4.0x, we must also define a variable to determine if the user is running that browser:

var NS4MAC = NS4 &&
            (navigator.appVersion.indexOf("Macintosh") > -1);

Another global variable enables you to set the size of the lookup list:

var size = 8;

This variable determines the number of options that the user can see without having to scroll down the list. If size is equal to the total number of sites (ar.length), the list does not feature a scroll bar. The next variable keeps track of when the cursor is located in the lookup list's text field:

var active = false;

It is initially set to false because the cursor is not located in the text field when the page loads.

Our lookup list has two operation modes, as explained in the body of the script:

// select index style:
//   1. Standard
//      Selects an option if a substring match is found.
//      If no match is found, selects the closest match
//      from the bottom. For example, if the string is
//      "cz", it will match "cy...", "cx...", etc.
//   2. Explorer
//      Simulates the new index in Internet Explorer's
//      help. If the string is empty, selects the first
//      option. Otherwise, if no substring match is found
//      the selection doesn't change.
var style = 1;

When the user enters or deletes a character in the text box, the script looks for a substring match. In other words, it searches the options in the list to see if any of them start with the entered string. If more than one substring match exists, the first matching option is selected. In both modes, if the text field becomes empty, the first option is selected.

The only difference between the two modes is what happens when the text field is not empty, and no substring match is found. In Standard mode (1) the script selects the closes match from the bottom. In order to understand this mechanism, let's imagine the script did find a match for the user's string. But since it didn't really find one, it selects the option that would have appeared just before the imaginary match. When the lookup list is functioning in Explorer mode (2), the selection simply doesn't change if not substring match is found (and the box is not empty).

The last global statement in our script invokes the start() function which does most of the dirty work:

start();

This function is explained in the next section of the column.