Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jun 2002
    Location
    Germany
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Sorting in drop down lists

    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!

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    The Planet Earth Code Poet: True
    Posts
    282
    Thanks
    0
    Thanked 1 Time in 1 Post
    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

  • #3
    New to the CF scene
    Join Date
    Jun 2002
    Location
    Germany
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Location
    The Planet Earth Code Poet: True
    Posts
    282
    Thanks
    0
    Thanked 1 Time in 1 Post
    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?

  • #5
    New to the CF scene
    Join Date
    Jun 2002
    Location
    Germany
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •