The user can immediately locate what he has been searching for in the long options list just by typing. With each character the user types in the text field, the available items listed are narrowed down (similar to a help file's index feature). (Start by entering an 'a' to narrow the list)
Add the below code to the <body> section of your page:
<scriptlanguage="javascript"type="text/javascript"> /* Visit http://www.yaldex.com/
for full source code
and get more free JavaScript, CSS and DHTML scripts! */
<!-- Begin function
SelObj(formname,selname,textname,str){ this.formname
=
formname; this.selname
=
selname; this.textname
=
textname; this.select_str
=
str ||''; this.selectArr
=newArray(); this.initialize
=
initialize; this.bldInitial
=
bldInitial; this.bldUpdate
=
bldUpdate;
}
function
initialize(){ if(this.select_str
==''){ for(var
i=0;i<document.forms[this.formname][this.selname].options.length;i++){ this.selectArr[i]=document.forms[this.formname][this.selname].options[i]; this.select_str
+=document.forms[this.formname][this.selname].options[i].value+":"+ document.forms[this.formname][this.selname].options[i].text+","; }
} else{ var
tempArr =this.select_str.split(','); for(var
i=0;i<tempArr.length;i++){ var
prop =
tempArr[i].split(':'); this.selectArr[i]=newOption(prop[1],prop[0]); }
} return;
} function
bldInitial(){ this.initialize(); for(var
i=0;i<this.selectArr.length;i++) document.forms[this.formname][this.selname].options[i]=this.selectArr[i]; document.forms[this.formname][this.selname].options.length=this.selectArr.length; return;
}
function
bldUpdate(){ var
str =document.forms[this.formname][this.textname].value.replace('^\\s*',''); if(str
==''){this.bldInitial();return;} this.initialize(); var
j =0; pattern1 =newRegExp("^"+str,"i"); for(var
i=0;i<this.selectArr.length;i++) if(pattern1.test(this.selectArr[i].text)) document.forms[this.formname][this.selname].options[j++]=this.selectArr[i]; document.forms[this.formname][this.selname].options.length=
j; if(j==1){ document.forms[this.formname][this.selname].options[0].selected=true;
//document.forms[this.formname][this.textname].value =
document.forms[this.formname][this.selname].options[0].text; }
} function
setUp(){ obj1 =new
SelObj('menuform','itemlist','entry'); // menuform is the name of the
form you use
// itemlist is the name of the select pulldown menu you use
// entry is the name of text box you use for typing in obj1.bldInitial();
} window.onload=setUp; // End --> </script> <formname="menuform"onSubmit="javascript:window.location
=
document.menuform.itemlist.options[document.menuform.itemlist.selectedIndex].value;return
false;">
<fontface="arial,
helvetica"size="-1">Please
enter the first few letters of the item you are looking for.</font>
<br><br> <inputtype="text"name="entry"size="30"onKeyUp="javascript:obj1.bldUpdate();"> <br> <selectname="itemlist"size=5>
<optionvalue="page.html">ALL <optionvalue="page.html">ALL
CATALOG <optionvalue="page.html">ALL
CLUSTERS <optionvalue="page.html">ALL
CLUSTERS HASH EXPRESSIONS <optionvalue="page.html">ALL
COL COMMENTS <optionvalue="page.html">ALL
COL PRIVS <optionvalue="page.html">ALL
COL PRIVS MADE <optionvalue="page.html">ALL
COL PRIVS SENT <optionvalue="page.html">ALL
CONSTRAINTS <optionvalue="page.html">ALL
CONS COLUMNS <optionvalue="page.html">ALL
DB LINKS <optionvalue="page.html">ALL
DEF AUDIT <optionvalue="page.html">ALL
DEPENDENCIES <optionvalue="page.html">ALL
ERRORS <optionvalue="page.html">ALL
HISTOGRAMS <optionvalue="page.html">ALL
INDEXES <optionvalue="page.html">ALL
IND COLUMNS <optionvalue="page.html">ALL
JOBS <optionvalue="page.html">ALL
OBJECTS <optionvalue="page.html">ALL
REFRESH <optionvalue="page.html">ALL
REFRESH NOW <optionvalue="page.html">ALL
USERS <optionvalue="page.html">ALL
VIEWS <optionvalue="page.html">AUDIT
ACTIONS <optionvalue="page.html">BOOKS <optionvalue="page.html">CLIENTS <optionvalue="page.html">CLOSED <optionvalue="page.html">COLUMN
PRIVILEGES <optionvalue="page.html">DBA
ANALYZE COST <optionvalue="page.html">DBA
FROM CLIENTS <optionvalue="page.html">DBA
FROM NEIGHBORS <optionvalue="page.html">DBA
PROFILES <optionvalue="page.html">DBA
REFRESH ALL <optionvalue="page.html">DBA
REFRESH PAGE <optionvalue="page.html">DBA
REPORT <optionvalue="page.html">DBA
RGROUP <optionvalue="page.html">DBA
ROLE <optionvalue="page.html">DBA
ROLE SUMMARY <optionvalue="page.html">DBA
ROLLBACK SEGS </select>
</form>