Sorting in drop down lists

[RobertDouglass]

Hi all,
When you have a drop down list [select][option][/option][/select] etc., and the text area is selected, the default behavior is for every keystroke to cause the selected option item to change, namely to the first one in the list that starts with that letter. For example, if I have options "animal" "bear" "boy" "oyster" etc., and the list has focus, and I type "b", it will jump to "bear". If I wanted to get to "boy", and then typed an "o" hoping to get to the first word that starts with "bo", I'll be disappointed to see that I land on "oyster". I'd like to implement a drop down list that overrides the default behavior and functions rather like the index of MS Office Help, where every progressive letter narrows down the selected choices. It only needs to work in IE 5.0 and higher, and can be JavaScript, DHTML, or any other script that follows DOM. Anybody have any suggestions? Thanks in advance!

[JohnKrutsch]

jkd, stuntboy and I made such a beast about a year ago. You can see it in action and get the source code at:

http://asp.xcentrixlc.com/john/autoscroll.htm

[RobertDouglass]

This looks great. It is almost exactly what I wanted, and I'm very grateful! There are just a couple aspects of the script's behavior that I would wish to change, and I'm looking at the code to think of a way to do so. When the user pushes 'Return' or 'Enter', the variable tex should be set back to null. I'd also like to make it so that the current value of tex is displayed in the comboBox itself, instead of in the status bar. Any suggestions on how I could do this?

[JohnKrutsch]

If you clear tex upon pressing enter, then pressing enter will not select your currently highlighted entry, instead it will select the first entry in the list. As soon as the combo box losses focus tex is reset.

As far as having the value of tex be what is displayed in the combobox, that can't be done with the method we are using here becasue it loops through the values of the combo box looking for matches.

Stuntboy's original code had a textbox adjacent to the combobox where you would type into the textbox which would cause the combobox to scroll to any matching entries, maybe something like that would suit your needs?

[RobertDouglass]

We made just a few minor modifications:

<script>
<!--//

var tex='';
var focused=false;

document.onkeydown=function(){
if(!document.all) return true;
ek = event.keyCode;
if (focused && ek==8){
tex=tex.substr(0, tex.length-1);
comboFocus();
return false;
}
if (focused && ek==46){
tex='';
comboFocus();
return false;
}
}

document.onkeypress=function(){
if (!focused||!document.all) return true;
var e=event.keyCode;
if(e==9||e==13||e==38||e==40) return true;
else if(31<e<127) tex+=String.fromCharCode(e).toLowerCase();
else return false;
comboFocus();
return false;
}

function findIndexLinear(i, s) {
while(focused.options[i+1] && focused.options[i].text.substr(0,s.length).toLowerCase() < s) {
i++;
}
if(focused.options[i].text.substr(0,s.length).toLowerCase() > s)
return -1;
else
return i;
}

function comboFocus(){
window.status=tex;
document.all.huba.innerHTML=tex;
if(tex.length==0) {
focused.selectedIndex = 0;
return;
}
target = 0;
for(i=1; i<=tex.length; i++) {
newTarget = findIndexLinear(target, tex.substring(0, i));
if(newTarget<0) {
tex=tex.substr(0, i-1);
window.status=tex;
document.all.huba.innerHTML=tex + " (no match)";
break;
}
target = newTarget;
}
focused.selectedIndex=target;
}

function comboReset(){
tex='';
document.all.huba.innerHTML=tex;
focused=false;
window.status='';
return true;
}

//-->
</script>



thanks so much!