Quick Search:
CODE
Oracle PL/SQL Code Library
JOBS
Find Or Post Oracle Jobs
FORUM
Oracle Discussion & Chat
 JavaScript: DHTML Combo Box Dropdown Jump to:  
Category: >> JavaScript >> DHTML Combo Box Dropdown Bookmark and Share

<< lastnext >>

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 D...
» SELECT: Case insensitive search
» SELECT: Partition Select
» SELECT: Select For Update
» SELECT: Using Functions
» SELECT: Get DISTINCT / UNIQUE values
» SELECT: Get UNIQUE / 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/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>


Free
Oracle Magazine
Subscriptions
and Oracle White Papers


SQL University.net courses meet the most demanding needs of the business world for advanced education in a cost-effective manner. SQL University.net courses are available immediately for IT professionals and can be taken without disruption of your workplace schedule or processes.

Compared to traditional travel-based training, SQL University.net saves time and valuable corporate resources, allowing companies to do more with less. That's our mission, and that's what we deliver.

Click here to find out more
 
Home      :      Code Library      :      Sponsors      :      Privacy      :      Terms of Use      :      Contact Us 89 users online    © 2009 psoug.org

PSOUG LOGIN
Username: 
Password: 
Forgot your password?