Question about a form select dropdown

[admin]

I've got a question about something I'd like to do with my Select Dropdown box.. but I'm not sure how (or even if) i can do it.<br />
<br />
I want a user to be able to type into the dropdown box and as the user types (say they type pit) the dropdown drops down to the first option that matchs those letters. <br />
<br />
Example:<br />
The user types p - the dropdown drops down to the first option that starts with p.<br />
The user types pi - the dropdown drops down to the first option that begins with pi.<br />
The user types pit - the dropdown drops down to pitbull as pitbull is the only entry that begins with pit.<br />
<br />
Is this something I can do? If so, how?<!--content-->I won't say it's impossible, it's just very hard and messy.<br />
<br />
This is one of the things expected in XForms (<!-- m --><a class="postlink" href="http://www.w3.org/TR/xforms/">http://www.w3.org/TR/xforms/</a><!-- m -->), which are the next generation of forms that the W3C are working on.<br />
<br />
If you have that many Select Options you should re-think your design.<!--content-->Then it sounds like it's something I can't do then or rather.. shouldn't as I have over 150 select options<!--content-->Here is something that is kinda ugly... Although with some fancy <div>'s you may be able to get something together: This will do what you want, only with a text box on top of it. Although it will change the select as you type... <br />
<br />
<br />
<script><br />
<!--<br />
function doSelectChange(el,dest) {<br />
dest.value = el.options[el.selectedIndex].text<br />
}<br />
<br />
function lookupItem(el,dest) {<br />
if (!isDHTML) {<br />
el.blur(); el.focus()<br />
}<br />
var curValue = el.value.toLowerCase()<br />
var found = false<br />
var index = dest.selectedIndex<br />
var numOptions = dest.options.length<br />
var pos = 0<br />
while ((!found) && (pos < numOptions)) {<br />
found = (dest.options[pos].text.toLowerCase().indexOf(curValue)==0) <br />
if (found) <br />
index = pos<br />
pos++<br />
}<br />
if (found)<br />
dest.selectedIndex = index<br />
if (!isDHTML) <br />
el._v = setTimeout("lookupItem(document.lForm.textInput, document.lForm.selectInput)",500)<br />
}<br />
<br />
function goValue(el) {<br />
var where<br />
if (el.selectedIndex>-1) {<br />
where = el.options[el.selectedIndex].value<br />
window.open(where,"")<br />
}<br />
}<br />
<br />
var ie4 = (document.all)<br />
var ns4 = (document.layers)<br />
var isDHTML = ie4 || ns4<br />
// --><br />
</script><br />
<br />
<form><br />
<table><br />
<tr><br />
<td><br />
<INPUT TYPE="text" NAME="textInput" SIZE="18" STYLE="width: 120pt" ONFOCUS='if (!isDHTML) this._v=setTimeout("lookupItem(document.lForm.textInput, document.lForm.selectInput)",500)'" ONBLUR='if (!isDHTML) clearTimeout(this._v)' ONKEYUP="lookupItem(this,this.form.selectInput)"><br />
</td><br />
</tr><br />
<tr><br />
<td><br />
<SELECT SIZE="1" NAME=selectInput STYLE="width: 120pt" ONCHANGE="doSelectChange(this, this.form.textInput)"><br />
<option value="http://www.whereever.com" selected>testing this is a</option><br />
<option value="http://www.whereever.com">what to do with a test</option><br />
<option value="http://www.whereever.com">can you test this</option><br />
<option value="http://www.whereever.com">this is a test</option><br />
<option value="http://www.whereever.com">test this a is</option><br />
<option value="http://www.whereever.com">is this a test</option><br />
<option value="http://www.whereever.com">test a this is</option><br />
<option value="http://www.whereever.com">a test is this</option><br />
<option value="http://www.whereever.com">do a test this way</option><br />
<option value="http://www.whereever.com">how to test this</option><br />
<option value="http://www.whereever.com">don't test this</option><br />
<option value="http://www.whereever.com">thought I would test this</option><br />
<option value="http://www.whereever.com">help, I need a test</option><br />
<option value="http://www.whereever.com">throw away this test</option><br />
<option value="http://www.whereever.com">togather we can test this</option><br />
<option value="http://www.whereever.com">totally new test</option><br />
<option value="http://www.whereever.com">can I come up with more?</option><br />
<option value="http://www.whereever.com">yes, I can</option><br />
<option value="http://www.whereever.com">no, I can not</option><br />
<option value="http://www.whereever.com">more tests to come</option><br />
<option value="http://www.whereever.com">testing is fun</option><br />
<option value="http://www.whereever.com">we are having fun</option><br />
<option value="http://www.whereever.com">well this test sucks</option><br />
<option value="http://www.whereever.com">well this test is cool</option><br />
<option value="http://www.whereever.com">cool test here</option><br />
</select><br />
</td><br />
</tr><br />
</table><br />
<input type="Button" value="Go" ONCLICK="goValue(this.form.selectInput)"><br />
</form><!--content-->