No frills (non-jQuery) type-ahead for dropdowns?
If I have a bare dropdown box, what is the easiest no frills way to add type ahead?
There is nothing c开发者_JAVA技巧omplicated or dynamic about the box itself, it just has a lot of options (here, US States).
Essentially I'm wondering if this simple case can be done in a few lines of code if I'm willing to give up on all the other features like AJAX.
This should work:
<head>
<script type="text/javascript">
function typeDropdown(typedStr,ddObj) {
var index = ddObj.getElementsByTagName("option");
for(var i = 0; i < index.length; i++) {
if(index[i].firstChild.nodeValue.toLowerCase().substring(0,typedStr.length) == typedStr.toLowerCase()) {
index[i].selected = true;
break;
}
}
}
</script>
</head>
<body>
<form>
<input type="text" name="search" onkeyup="typeDropdown(this.value,this.parentNode.dd);" />
<select name="dd">
<option>Your Options</option>
<option>Here</option>
</select>
</form>
</body>
It's not as pretty, but I think this is the simplest you can get.
加载中,请稍侯......
精彩评论