JavaScript: DHTML Combo Box Dropdown - Cool script changes your SELECT elements into a Select/Combobox element. Works in Firefox and IE 6+.

Quick Search:

JavaScript: DHTML Combo Box Dropdown

Jump to:

Category: >> JavaScript >> DHTML Combo Box Dropdown

<< last

next >>

Snippet Name: DHTML Combo Box Dropdown

Description: Cool script changes your SELECT elements into a Select/Combobox element. Works in Firefox and IE 6+.

Also see:
» Get and set select lists with Javascri...
» Selecting a Random Row
» JS ComboBox
» TABLE: Using Select Statement With Data
» SELECT: Case insensitive search
» SELECT: Partition Select
» SELECT: Select For Update
» SELECT: Using Functions
» SELECT: Get DISTINCT or UNIQUE values
» SELECT: Get UNIQUE and DISTINCT values
» SELECT: Scalar Select
» SELECT with HAVING Clause
» SELECT with GROUP BY Clause
» SELECT with WHERE Clause
» SELECT with SAMPLE clause
» SELECT placement
» SELECT into a table
» SELECT name columns
» SELECT
» UPDATE: Update from a SELECT statement
» Inserting into SELECT statement
» INSERT with Select
» Build select menu from database
» Build HTML select list from table
» Select (dropdown) list generator
» MYSQL Select time from a date
» Select based on a field that can have ...
» Select distinct or unique entries
» Select maximum value
» Select minimum value

Comment: (none)

Language: JAVASCRIPT
Highlight Mode: JAVASCRIPT
Last Modified: March 22nd, 2009

<HTML>
<HEAD>
 
<SCRIPT>  
<!--  
 
FUNCTION combotext_onkeydown(e,oText,oSelect){  
 
  keyCode = e.keyCode;  
 
  IF (keyCode == 40 || keyCode == 38) {  
    oSelect.style.display = 'block';  
    oSelect.FOCUS();  
    comboselect_onchange(oSelect, oText);  
  }  
  ELSE IF (keyCode == 13) {  
    e.cancelBubble = TRUE;  
    IF (e.returnValue) e.returnValue = FALSE;  
    IF (e.stopPropagation) e.stopPropagation();  
    comboselect_onchange(oSelect, oText);  
    oSelect.style.display='none';  
    oText.FOCUS();  
    RETURN FALSE;  
  }  
  ELSE IF(keyCode == 9) RETURN TRUE;  
  ELSE { //alert(keyCode);  
 
    oSelect.style.display = 'block';  
 
    VAR c = String.fromCharCode(keyCode);  
    c = c.toUpperCase();   
    toFind = oText.value.toUpperCase() + c;  
 
    FOR (i=0; i < oSelect.options.length; i++){  
       nextOptionText = oSelect.options.text.toUpperCase();  
 
        IF(toFind == nextOptionText){  
            oSelect.selectedIndex = i;  
            BREAK;  
        }  
 
        IF(i < oSelect.options.length-1){  
           lookAheadOptionText = oSelect.options[i+1].text.toUpperCase() ;  
           IF( (toFind > nextOptionText) &&   
              (toFind < lookAheadOptionText) ){  
              oSelect.selectedIndex = i+1;  
              BREAK;  
           }  
         }  
         ELSE {  
           IF(toFind > nextOptionText){  
               oSelect.selectedIndex = oSelect.options.length-1; // stick it at the end  
               BREAK;  
           }  
       }  
    }  
  }  
}  
 
 
FUNCTION comboselect_onchange(oSelect,oText) {  
  IF(oSelect.selectedIndex != -1)  
    oText.value = oSelect.options[oSelect.selectedIndex].text;  
}  
 
FUNCTION comboselect_onkeyup(keyCode,oSelect,oText){  
  IF (keyCode == 13) {  
    comboselect_onchange(oSelect, oText);  
    oSelect.style.display='none';  
    oText.FOCUS();  
  }  
}  
 
// -->  
</SCRIPT>  
<body onclick="document.getElementById('selectInput').style.display='none'">  
  <FORM NAME=form1>  
      <DIV STYLE="position:relative">  
      <INPUT TYPE="text"   
             NAME=textInput   
             SIZE=18   
             AUTOCOMPLETE="OFF"  
             ONKEYDOWN="combotext_onkeydown(event, this, this.form.selectInput)">  
      <SELECT NAME=selectInput  
             SIZE=8   
             STYLE="display:none; position:absolute; top:20px; left:0px"   
             ONBLUR="this.style.display='none'"  
             ONCHANGE="comboselect_onchange(this, this.form.textInput)"  
             ONKEYUP="comboselect_onkeyup(event.keyCode, this, this.form.textInput)">  
        <OPTION VALUE="Kansas City">Kansas City</OPTION>  
        <OPTION VALUE="Overland Park">Overland Park</OPTION>  
        <OPTION VALUE="St. Louis">St. Louis</OPTION>  
      </SELECT>  
      <DIV>  
  </FORM>  
<BODY>  
 
</HTML>