Lookup Lists: Selecting a Matching Option - Doc JavaScript

Selecting a Matching Option

First we need a function to select a specified option:

function select(list, i) {
  if (list.selectedIndex != i) list.selectedIndex = i;
}

select() accepts a reference of the list and the index of desired option -- if the specified option isn't already selected, it selects that option by assigning the new index to the list's selectedIndex property. It's important to check if the specified option isn't already selected, because selecting an option (regardless of whether it is selected) makes the entire list "flash" on Navigator 4.0x. Now take a look at the checkKey() function which is executed whenever the user presses a key:

function checkKey() {
  if (!active) return;
  var form = document.organizer;
  var field = form.prefix;
  var list = form.list;
  var str = field.value.toLowerCase();
  if (str == "") {
    select(list, 0);
    return;
  }
  for (var i = 0; i < list.options.length; ++i) {
    if (list.options[i].text.toLowerCase().indexOf(str) == 0) {
      select(list, i);
      return;
    }
  }
  if (style == 1) {
    for (i = list.options.length - 1; i >= 0; --i) {
      if (str > list.options[i].text.toLowerCase()) {
        select(list, i);
        return;
      }
    }
    select(list, 0);
  }
}

The function is terminated by the return statement if active is false, because active is false only when the cursor is not located in the text box. The next set of statements creates references of the form, text field, and select menu, respectively:

var form = document.organizer;
var field = form.prefix;
var list = form.list;

The user's input (the value of the text field) is then converted to all-lowercase characters, and the new string is assigned to str.

If the box is empty, the first option is selected, and the function is terminated:

if (str == "") {
  select(list, 0);
  return;
}

If the box isn't empty, the function searches the options for a substring match. That is, it loops through the options, looking for one whose text starts with the entered string (the value of the text field):

for (var i = 0; i < list.options.length; ++i) {
  if (list.options[i].text.toLowerCase().indexOf(str) == 0) {
    select(list, i);
    return;
  }
}

list.options[i].text.toLowerCase() is the lowercase conversion of the option whose index is i. If str is found at the beginning of that string, the function selects the current option (i) and terminates the function. Otherwise, the loop continues until a match is found, or until all of the options have been checked.

The remaining portion of the function is only executed if the lookup list is operating in Standard mode (1). If the current mode is Explorer (2), the function has reached its end. If no match was found, the selection does not change. The following loop is only executed in Standard mode (1):

for (i = list.options.length - 1; i >= 0; --i) {
  if (str > list.options[i].text.toLowerCase()) {
    select(list, i);
    return;
  }
}

This for statement loops through the list's options in reverse order, looking for an option whose text is "less than" (in lexicographic order) the entered text. Note that both the entered text and the text of the current option are converted to all-lowercase before being compared. When the desired option is found, it is selected and the function terminates. Finally, if the entered text is "less than" the first option, the first option is selected.

Created: March 11, 1998
Revised: March 11, 1998

URL: https://www.webreference.com/js/column15/selecting.html