help with selecting items in a list box

[newcomer]

I have a javascript index that is similar to the one in the Windows
help. It has a text field that allows the you to type text and it
finds the closest item in the list below the text field. The list is
simply a select element with options that looks like this:

<SELECT>
<OPTION VALUE="1">A
<OPTION VALUE="2">B
<OPTION VALUE="3">C
</SELECT>

My problem is when I have a large list, the closest entry selects the
item in the list at the bottom of the list box, not the top of the
list box.

So here's the question: Is there a way to get the list box to display
the selected item and move it to the top of the list and not just find
it at the bottom?

To get an idea of what I 'want' it to look like, in Windows, go to
Help & Support (in XP it's in your start menu) and pick Index. I
basically want it to mirror that functionality.

 

[Yann-Erwan Perio]

I have a javascript index that is similar to the one in the Windows
help. It has a text field that allows the you to type text and it
finds the closest item in the list below the text field.

So here's the question: Is there a way to get the list box to display
the selected item and move it to the top of the list and not just find
it at the bottom?

<form action="foo" onsubmit="return false;">
<script type="text/javascript">
document.write(
"<input type='text' name='search' onkeyup='S(this)'>"
);
</script>
<select name="list" size="3">
<option value="Batou" selected="selected">Batou</option>
<option value="Bormer">Bormer</option>
<option value="Ishikawa">Ishikawa</option>
<option value="Major">Major</option>
<option value="Pazu">Pazu</option>
<option value="Tachikoma">Tachikoma</option>
<option value="Togusa">Togusa</option>
</select>
</form>

<script type="text/javascript">
function S(oTxt){
var oSel, size, text, value;

oSel = oTxt.form.elements["list"];
size = oSel.size;
text = oTxt.value.toLowerCase();

for(var ii=0, opt=oSel.options, n=opt.length; ii<n; ii++) {
value = opt[ii].value.toLowerCase();
if(value.indexOf(text)==0) {
opt[ii+size<n?ii+size:n-1].selected=true;
opt[ii].selected=true;
break;
}
}
}
</script>