SiteExperts.com Logo Home | Community | Developer's Paradise | Jobs
User Groups | Site Tools | Site Information | Search

Inside Technique : Lookup Lists
By Scott Isaacs

This article combines a standard text box and list box to create a lookup list. As the user types into the text box, the list item that most closely matches is automatically highlighted. This example runs in both Internet Explorer 4.0 and Netscape Navigator 4.0 without the need for any custom browser code.

 
 


 

Lookup lists are created with a standard textbox and listbox and are associated through their events. The two events that are tracked are the onchange event on the listbox and the onkeyup event on the textbox. Every time the user selects for the listbox, the selected item's text is updated in the textbox, and conversely each character the user types in the textbox causes the listbox to update with the nearest match.

The following HTML demonstrates how this example was created: 

  <FORM>
    <TABLE><TR><TD>
      <INPUT TYPE="text" 
             NAME=textInput 
             SIZE=18 
             STYLE="width: 120pt" 
             ONKEYUP="lookupItem(this,this.form.selectInput)">
    </TD><TD></TR><TR><TD>
      <SELECT SIZE=8 
             NAME=selectInput 
             STYLE="width: 120pt" 
             ONCHANGE="doSelectChange(this, this.form.textInput)">
        <OPTION VALUE="http://www.erols.com/jrule/dhtml">
          DHTML Demos
        </OPTION>
        <OPTION VALUE="http://www.dhtmlZone.com">
          DHTML Zone
        </OPTION>
        <OPTION VALUE="http://www.insideDHTML.com">
          Inside Dynamic HTML
        </OPTION>
        <OPTION VALUE="http://www.microsoft.com/sitebuilder">
          Microsoft Sitebuilders
        </OPTION>
        <OPTION VALUE="http://www.webCoder.com">
          Web Coder
        </OPTION>
        <OPTION VALUE="http://www.webMonkey.com">
          Web Monkey
        </OPTION>
        <OPTION VALUE="http://www.webReference.com">
          Web Reference
        </OPTION>
      </SELECT>
    </TD></TR></TABLE>
    <INPUT TYPE="Button" VALUE="Go" ONCLICK="goValue(this.form.selectInput)">
  </FORM>

In the SELECT listbox, the onchange event calls the doSelectChange function. This function takes two arguments. The first argument is the listbox itself, and the second argument is the textbox that needs to be updated. In the TEXTBOX element, the ONKEYUP event calls the lookupItem function and also takes two arguments. The first argument is the textbox itself, and the second argument is the listbox that is being searched.

In both the listbox and textbox a CSS width is defined to force both the textbox and listbox to line up. The width property is defined by CSS1 to define the size of the element. Only Internet Explorer 4.0 supports this CSS1 property. In Netscape Navigator you need to approximate the width of the textbox using the SIZE attribute in relation to the size of the SELECT element. The TABLE around the elements is used for layout purposes. While Netscape does not honor the CSS width property, this property has an effect on the spacing of the form elements when specified outside of the table.

In the above example, I have chosen to use the VALUE field to specify a destination URL. When you click on the Go button, a new window is opened with the specified URL. You can customize and use the list text and its value based on your needs.

The Code

The code in each of the functions is very simple and involves no browser detection. When the user selects an item from the listbox, the text of the listbox is copied to the textbox. This function works in all Javascript aware browsers: 

  function doSelectChange(el,dest) {
    dest.value = el.options[el.selectedIndex].text
  }

The function that does the lookup is slightly more involved but actually would also run in all JavaScript aware browsers. The reason this example is limited to the 4.0 browsers is the lack of the keyboard events in older browsers. The onkeyup event is used to detect a change in value and to force a the code to do a new lookup. The lookup is performed by walking through the items in the list and finding the first match to the typed string. If no match is found, the user's last selection is retained: 

  function lookupItem(el,dest) {
    var curValue = el.value.toLowerCase()
    var found = false
    var index = dest.selectedIndex
    var numOptions = dest.options.length
    var pos = 0
    // Repeat until found or end of list is reached
    while ((!found) && (pos < numOptions)) {
      // Do comparisons in lowercase
      found = (dest.options[pos].text.toLowerCase().indexOf(curValue)==0) 
      if (found) 
        index = pos
      pos++
    }
    if (found)  // Updated listbox
      dest.selectedIndex = index
  }

The Go button contains really simple code that navigates the user to the URL specified by the selected item's OPTION value: 

  function goValue(el) {
    var where
    if (el.selectedIndex>-1) { 
      // Make sure there is a selection
      where = el.options[el.selectedIndex].value
      window.open(where)
    }
  }

You can use similar techniques to build your own custom input controls from the built-in controls. In the 4.0 browsers, the input controls now have events for real-time tracking of the user's input. We will explore these events and this technique more in future articles.

Discuss and Rate this Article

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.