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

Inside Technique : Lookup Lists II : The Code

<SCRIPT>
<!--
    // Copyright 1998, InsideDHTML.com, LLC. All rights reserved
    // This script can be reproduced as long as the above copyright
    // notice is maintained.

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

    function lookupItem(el,dest) {
      if (!isDHTML) {
        el.blur(); el.focus()
      }
      var curValue = el.value.toLowerCase()
      var found = false
      var index = dest.selectedIndex
      var numOptions = dest.options.length
      var pos = 0
      while ((!found) && (pos < numOptions)) {
        found = (dest.options[pos].text.toLowerCase().indexOf(curValue)==0) 
        if (found) 
          index = pos
        pos++
      }
      if (found)
        dest.selectedIndex = index
      if (!isDHTML) 
        el._v = setTimeout("lookupItem(document.lForm.textInput, document.lForm.selectInput)",500)
    }

    function goValue(el) {
      var where
      if (el.selectedIndex>-1) {
        where = el.options[el.selectedIndex].value
        window.open(where,"")
      }
    }

    var ie4 = (document.all)
    var ns4 = (document.layers)
    var isDHTML = ie4 || ns4
// -->
</SCRIPT>

  <FORM>
    <TABLE><TR><TD>
      <INPUT TYPE="text" 
             NAME=textInput 
             SIZE=18 
             STYLE="width: 120pt" 
             ONFOCUS='if (!isDHTML) this._v=setTimeout("lookupItem(document.lForm.textInput, document.lForm.selectInput)",500)'"
             ONBLUR = 'if (!isDHTML) clearTimeout(this._v)'
             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>
Discuss and Rate this Article