select box filtering in javascript

I am using some select box filtering javascript code from mattjp88 (exhange expert), which is nice to help resolve a data entry efficiency situation.  However, the select box filtering does not always work within the drop-down after the first time usage.  It works within the dropdown field consistently before the dropdown is perform or if you perform a double click on the field.  Below is the javascript I am using and a portion of the form code that is used wihin the select box.  The code provided by matt kruse is reacting the same way.  Can someone help resolve this issue and help explain why this is happening?  Does the browser treat the select box drop-down different from the value in the field?

http://www.mattkruse.com/javascript/autocomplete/




<script>
    var testString = "";
           
    function addChar(e) {
           
             
             if (e.keyCode) {
                 code = e.keyCode;
             } else if (e.which) {
                 code = e.which;
             }
               
             
             if (code == 8) {
                 
               testString = testString.replace(/.$/, "");
             } else {
                testString += String.fromCharCode(code);
             }
               
             re = new RegExp("^" + testString, "i");
               
             var matched = false;

             for (i = 0; i < document.form1.OBDataSet__135_1.options.length; i++) {
                 if (document.form1.OBDataSet__135_1.options[i].text.match(re)) {
                     setTimeout("document.form1.OBDataSet__135_1.selectedIndex = i", 50);
                     matched = true;
                     break;
                 }
             }
                 
             if (!matched) {
                 testString = testString.replace(/.*(.)$/, "$1");
             }
           
   }
</script>


>>>> portion of the form code listed below


<select size="1" name="OBDataSet__135_1" id="OBDataSet__135_1" onkeydown="addChar(event);"> </select>


jdzemkeAsked:
Who is Participating?
 
scrathcyboyConnect With a Mentor Commented:
Based on your latest example, the problem is exactly that.  Keystroke filtering does not work for a drop down list, as that is only in the options list of the drop down menu.  You are looking for --

"matched = true;"

and that NEVER happens unless ALL the keystrokes match ALL of the letters in the drop down menu.  So in your example, "bloc" does not match "block" or "blog" because it is not a complete match of all characters for the field.  Hence it defaults to the next entry, which is an error in the code.  In other words, the routine you are using cannot match the options list unless it takes **ALL** keystrokes first, and then on the ENTER key, it then looks for a match.  You will need to rewrite the logic of the routine for a drop down menu, as instantaneous attempts at matching one character at a time will not work.  Good luck.
0
 
scrathcyboyCommented:
why are you even using this code?  It is far too specific for keystrokes, and you do not want to use it or anything like it, generall speaking.  What are you trying to filter out by using this code?
0
 
jdzemkeAuthor Commented:
I am trying to allow a user to use keystrokes for filtering/choosing names on a drop-down list.  The problem I am having, is that the javascript I provided does the filtering successfully, if you perform the filter without doing the dropdown.  If you do the dropdown, on occassion the filtering does not work.  An example of it not working can be shown using the code below.  If you click the dropdown to display the list of values, and then type "bloc", "cat" will be chosen, when I want "block" to be chosen.





<html>
    <head>
        <script>
            var testString = "";
           
            function addChar(e) {
         
                 if (e.keyCode) {
                     code = e.keyCode;
       
                 } else if (e.which) {
                     code = e.which;
     
                 }
               
                 if (code == 8) {
     
                    // testString = testString.replace(/.$/, "");
                 } else {
                    testString += String.fromCharCode(code);

                }

               
                re = new RegExp("^" + testString, "i");

                   
                var matched = false;

       

                for (i = 0; i < document.frmTest.drpTest.options.length; i++) {
                    if (document.frmTest.drpTest.options[i].text.match(re)) {
                        setTimeout("document.frmTest.drpTest.selectedIndex = i", 50);
                        matched = true;
                        break;
                    }
                }
               
                if (!matched) {
                    testString = testString.replace(/.*(.)$/, "$1");
                }
           
            }
        </script>
    </head>
    <body>
        <form name="frmTest">
            <select name="drpTest" id="drpTest" onkeydown="addChar(event);">
                <option value="1">abort
                <option value="2">about
                <option value="3">apple
                <option value="4">block
                <option value="5">blog
                <option value="6">cat
                <option value="7">car
            </select>
        </form>
    </body>
</html>
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.