Susan,
Here you go.
Code:
<html>
<body>
<script Language="JavaScript">
function findItem(form_obj) {
for (var i = 0; i < form_obj.myList.length; i++) {
if (form_obj.myList.options[i].text.indexOf(form_obj.searchList.value) == 0) {
form_obj.myList.options[i].selected = true
return
}
}
// form_obj.myList.options[0].selected = true
}
</script>
<form>
<input type="text" name="searchList" onKeyUp="void findItem(this.form);">
<select name="myList">
<option>aaa1</option>
<option>aaa2</option>
<option>aaa3</option>
<option>aaa4</option>
<option>aaa5</option>
<option>bbb1</option>
<option>bbb2</option>
<option>bbb3</option>
</select>
</form>
</body>
</html>
Go ahead and just load this page and run it. You'll see that it should do what you want.
I've commented out a single line in that JavaScript function. If you uncomment that line, than the list will return to the first option if the text typed in the field ever gets to a point where it does not match anything. If you leave the line commented out, then the list will always remain at it's last selection, or movement. For example, if the visitor types in
aaa3 the list will move to that option as soon as they press the
3 key. If the press a
z key after that, then the list will either move back to the top or just stay where it is. Depending on if you leave that line commented out.
Here's something a little tricky, if you're posting your form, follow these rules.
Give that text box a unique name. In other words, don't name it
search or anything like that. Name it something very unique.
Make sure you clear that text box before you submit the form. If you don't follow these two rules, then when visitors start typing in that text box, IE's autofill function (if enabled) will drop down a list below the text field which could get pretty confusing in this particular situation if you know what I mean. So as long as you give it a very unique name, something that's not duplicated on any other website AND you clear the value of the box before you submit, you should be in good shape.
Beware, hitting the enter key in this text box will try to submit the form. You can disable that by placing this in your form tag.
Code:
<form ... onSubmit="return false">
Then, if you actually need to submit the form, you'll need to do that with a
button type element instead of a
submit type element. Like this.
Code:
<input type="button" value="Submit" onClick="this.form.submit();">
Let me know if you need any more help integrating this into your page.
ToddWW
. If you have more words starting with a, you can repeat typing this letter.