Search in Select Multi Drop Down List
Search & only display matching options in a Select multi list.
HTML
Search:
<input type="text" size="25" ID="searchFor" onkeyup="searchSelect(this.id,'searchIn')">
<br />
<select size="3" multiple="multiple" name="searchIn" id="searchIn">
<option value="abc">Option abc</option>
<option value="123">Option 123</option>
<option value="abc123">Option abc123</option>
<option value="xyz">Option xyz</option>
<option value="789">Option 789</option>
<option value="xyz789">Option xyz789</option>
</select>
JavaScript
function searchSelect(searchForID, searchInID) {
var input = document.getElementById(searchFor).value.toLowerCase();
var output = document.getElementById(searchIn).options;
for (var i = 0; i < output.length; i++) {
if (output[i].text.toLowerCase().indexOf(input) < 0) {
output[i].style.display = "none";
output[i].setAttribute('style', 'display:none');
} else {
output[i].style.display = "";
output[i].setAttribute('style', 'display:');
}
}
}