Drop Down Menu List with Search Function

Allows the user to search the contents of the menu list. A prompt window will pop up when clicking the menu list. Perfect for those who have a long list of web links.

If users do not enter any words or click Cancel, the drop-down menu will return to normal mode.

Script Demo:

Demo

JavaScript Code:

Insert this code into <head> tags

<script language="javascript">

<!-- Begin
function promptSearch (thisform, thisfield) {
var elnum = parseInt(-1);
var k = parseInt(-1);
for (var j = 0; j < document.forms[thisform].elements.length; j++) {
if (document.forms[thisform].elements[j].name == thisfield) {
elnum = j;
break;
   }
}
var myvar = "";
var srch = "";
var menuLength = "";
menuLength = eval("document." + thisform + "." + thisfield + ".length");
srch = prompt("Search this drop down menu for...", "");
if (srch ) {
srch = srch.toUpperCase();
for (var i = 0; i < menuLength; i++) {
myvar = eval("document." + thisform + "." + thisfield + ".options[" + i + "].text.toUpperCase()");
if (myvar.indexOf(srch) >= 0) {
document.forms[thisform].elements[elnum].options[i].selected = true;
break;
      }
   }
}
return false;
}
//  End -->
</script>

Insert this code into <body> tags

<center>
<form name=myform action="">
<select name=menu1 size=1 onFocus="promptSearch(this.form.name, this.name)">
<option>links1
<option>links2
<option>links3
<option>links4
<option>links5
<option>links6
<option>links7
<option>links8
<option>links9
<option>links10
<option>links11
<option>links12
<option>links13
<option>links14
<option>links15
</select>
</form>
</center>

Instruction:

The script is divided into two parts. Insert JavaScript parts into the HTML document's head tags, then insert the Form element to the page you want to display the menu list.

Webmaster » Web Programming » JavaScript » Pull Down Menu » Drop Down List Search

Related Links:

Home | Sitemap | Bookmark This Page

Sponsored Links

Sponsors

Recommended Links