?
Solved

select box filtering in javascript

Posted on 2006-10-23
3
Medium Priority
?
831 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 1500 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

Moving data to the cloud? Find out if you’re ready

Before moving to the cloud, it is important to carefully define your db needs, plan for the migration & understand prod. environment. This wp explains how to define what you need from a cloud provider, plan for the migration & what putting a cloud solution into practice entails.

Question has a verified solution.

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

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
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.
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
Suggested Courses

801 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