Solved

select box filtering in javascript

Posted on 2006-10-23
3
828 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
asp web application 3 53
Making exceptions for ValidationAttribute 2 37
Passing client data from form to server 5 52
Secure log in 'box' 4 40
Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

738 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