We help IT Professionals succeed at work.

We've partnered with Certified Experts, Carl Webster and Richard Faulkner, to bring you a podcast all about Citrix Workspace, moving to the cloud, and analytics & intelligence. Episode 2 coming soon!Listen Now

x

select box filtering in javascript

jdzemke
jdzemke asked
on
Medium Priority
883 Views
Last Modified: 2012-08-13
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>


Comment
Watch Question

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?

Author

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>
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.

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.