Solved

select box filtering in javascript

Posted on 2006-10-23
3
825 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>


0
Comment
Question by:jdzemke
  • 2
3 Comments
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 17793612
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
 

Author Comment

by:jdzemke
ID: 17795812
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
 
LVL 44

Accepted Solution

by:
scrathcyboy earned 500 total points
ID: 17801091
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

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
How to get the web content with different encodings 2 45
Master Content Pages, WebForms, and Session Variables 1 44
hosting images 4 28
PHP Installer 5 23
Read about why website design really matters in today's demanding market.
Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question