Just copy this code and save in html file .........run it and enjoy!!!
<html>
<head>
<title>Dropdown Filter</title>
</head>
<body>
<script language="JavaScript" type="text/javascript">
<!--
/*
filtery(pattern, list)
pattern: a string of zero or more characters by which to filter the list
list: reference to a form object of type, select
Example:
<form name="yourForm">
<input type="text" name="yourTextField" onchange="filtery(this.value,this.form.yourSelect) ">
<select name="yourSelect">
<option></option>
<option value="Australia">Australia</option>
.......
*/
function filtery(pattern, list){
/*
if the dropdown list passed in hasn't
already been backed up, we'll do that now
*/
//alert("list.bak"+list.bak);
if (!list.bak){
/*
We're going to attach an array to the select object
where we'll keep a backup of the original dropdown list
*/
list.bak = new Array();
for (n=0;n<list.length;n++){
list.bak[list.bak.length] = new Array(list[n].value, list[n].text);
}
}
/*
We're going to iterate through the backed up dropdown
list. If an item matches, it is added to the list of
matches. If not, then it is added to the list of non matches.
*/
match = new Array();
nomatch = new Array();
for (n=0;n<list.bak.length;n++){
if(list.bak[n][1].toLowerCase().indexOf(pattern.toLowerCase())!=-1){
match[match.length] = new Array(list.bak[n][0], list.bak[n][1]);
}else{
nomatch[nomatch.length] = new Array(list.bak[n][0], list.bak[n][1]);
}
}
/*
Now we completely rewrite the dropdown list.
First we write in the matches, then we write
in the non matches
*/
for (n=0;n<match.length;n++){
list[n].value = match[n][0];
list[n].text = match[n][1];
}
for (n=0;n<nomatch.length;n++){
list[n+match.length].value = nomatch[n][0];
list[n+match.length].text = nomatch[n][1];
}
/*
Finally, we make the 1st item selected - this
makes sure that the matching options are
immediately apparent
*/
list.selectedIndex=0;
}
// -->
</script>
<form name="yourForm">
Search
<!--<input type="text" name="yourTextField" onkeyup="filtery(this.value,this.form.yourSelect)" onchange="filtery(this.value,this.form.yourSelect) "> -->
<input type="text" name="yourTextField" onkeyup="filtery(this.value,document.yourForm.your Select)" onchange="filtery(this.value,this.form.yourSelect) ">
<select name="yourSelect">
<option></option>
<option value="Australia">Australia</option>
<option value="China">China</option>
<option value="England">England</option>
<option value="New Zealand">New Zealand</option>
</select>
</form>
</body>
</html>
Can JavaScript do Incremental Searching?
Linear Mode
