Quick Search List Box - JavaScript

Users can instantly find the search results when typing in a long list of options. When you enter a letter, the script will narrow the search to find from the options list the results you want. Non-related letters will be excluded initially.

The list box is ideal for those sites with a long list of URLs or catalog.

Script Demo:

Demo

JavaScript Code:

Insert this code into <head> tags

<script language="javascript">
<!-- Original:  Anand Raman (anand_raman@poboxes.com) -->
<!-- Free resources: Road to webmaster (http://www.road2webmaster.com) -->



<!-- Begin
function SelObj(formname,selname,textname,str) {
this.formname = formname;
this.selname = selname;
this.textname = textname;
this.select_str = str || '';
this.selectArr = new Array();
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] = new Option(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 = new RegExp("^"+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();
}
//  End -->
</script>

Insert this code into <body> tags

<center>
<form name="menuform" onSubmit="javascript:window.location = document.menuform.itemlist.options[document.menuform.itemlist.selectedIndex].value;return false;">

<font face="arial, helvetica" size="-1">Please enter the first few letters of the item you are looking for.</font>
<br><br>
<input type="text" name="entry" size="30" onKeyUp="javascript:obj1.bldUpdate();">
<br>
<select name="itemlist" size=5>
<option value="PAGE.html">ALL
<option value="PAGE.html">ALL CATALOG
<option value="PAGE.html">ALL CLUSTERS
<option value="PAGE.html">ALL CLUSTERS HASH EXPRESSIONS
<option value="PAGE.html">ALL COL COMMENTS
<option value="PAGE.html">ALL COL PRIVS
<option value="PAGE.html">ALL COL PRIVS MADE
<option value="PAGE.html">ALL COL PRIVS SENT
<option value="PAGE.html">ALL CONSTRAINTS
<option value="PAGE.html">ALL CONS COLUMNS
<option value="PAGE.html">ALL DB LINKS
<option value="PAGE.html">ALL DEF AUDIT
<option value="PAGE.html">ALL DEPENDENCIES
<option value="PAGE.html">ALL ERRORS
<option value="PAGE.html">ALL HISTOGRAMS
<option value="PAGE.html">ALL INDEXES
<option value="PAGE.html">ALL IND COLUMNS
<option value="PAGE.html">ALL JOBS
<option value="PAGE.html">ALL OBJECTS
<option value="PAGE.html">ALL REFRESH
<option value="PAGE.html">ALL REFRESH NOW
<option value="PAGE.html">ALL USERS
<option value="PAGE.html">ALL VIEWS
<option value="PAGE.html">AUDIT ACTIONS
<option value="PAGE.html">BOOKS
<option value="PAGE.html">CLIENTS
<option value="PAGE.html">CLOSED
<option value="PAGE.html">COLUMN PRIVILEGES
<option value="PAGE.html">DBA ANALYZE COST
<option value="PAGE.html">DBA FROM CLIENTS
<option value="PAGE.html">DBA FROM NEIGHBORS
<option value="PAGE.html">DBA PROFILES
<option value="PAGE.html">DBA REFRESH ALL
<option value="PAGE.html">DBA REFRESH PAGE
<option value="PAGE.html">DBA REPORT
<option value="PAGE.html">DBA RGROUP
<option value="PAGE.html">DBA ROLE
<option value="PAGE.html">DBA ROLE SUMMARY
<option value="PAGE.html">DBA ROLLBACK SEGS
</select>
</form>
</center>

Instruction:

Modify the table style to suit your site.
Change the <body> to <body onLoad="javascript:setUp()">

Webmaster » Web Programming » JavaScript » Forms » List Box Options

Related Links:

Home | Sitemap | Bookmark This Page

Sponsored Links

Recommended Links