could not set the options in select dynamically

Discussion in 'JavaScript' started by krazycoder, Jul 4, 2010.

0
  1. #1
    Hi,

    I have a select and list of options. I have onkeypress event on the select input.
    As the user types I am trying to match the entered key strokes to the entries in the options and setting the selected value to the first match.

    The problem I am facing is this:
    My options have 10000,0000, 10001, 1111,0001.
    Say I type 10, with less than one sec delay I consider them as one unit.
    So I try to find whether there are any entries in the options which starts with 10 and setting the value. But brower is considering the last entered key stroke , in this example 0 and setting the 0000 which is the first match.


    Is there any way that I can stop the browser from doing that or any idea?


    Here is the code.

    <html>
    <head>

    <script type="text/javascript">
    var previousKeyStrokeTimeStamp ;
    var presentKeyStrokeTimeStamp ;
    var enteredChars = "";
    var allowedDelay = 1000;//in milliseconds
    var previousSelectedOption ="";

    window.onload = resetValues;

    function resetValues(){
    enteredChars = "";
    var txtArea = document.getElementById('testvalues');
    if(txtArea!=null){
    txtArea.value = "";
    }
    }

    function populate(e,id){

    if(e.keyCode==13)return;

    var selectElement = document.getElementById(id);
    var charCode = String.fromCharCode(e.keyCode);

    if(previousKeyStrokeTimeStamp==null){ //initialize the key stroke for the first time
    previousKeyStrokeTimeStamp = new Date();
    }
    presentKeyStrokeTimeStamp = new Date();

    var delay = presentKeyStrokeTimeStamp-previousKeyStrokeTimeStamp;
    previousKeyStrokeTimeStamp = presentKeyStrokeTimeStamp ;


    if(delay<allowedDelay){
    enteredChars += charCode;
    }else{
    enteredChars = charCode;
    }
    var txtArea = document.getElementById('testvalues');
    txtArea.value += "\n "+enteredChars +" - "+delay;

    for ( var i = 0; i < selectElement.options.length; i++ ) {
    if ( selectElement.options.value.indexOf(enteredChars)== 0) {
    selectElement.options.selected = true;
    txtArea.value += "-"+(i+1);
    break
    }
    }
    }
    </script>
    </head>

    <body>
    <div align="center">
    <select id="sapCustomerNumber" onkeypress="populate(event,'sapCustomerNumber')"
    onclick="resetValues()">
    <option value="10000">10000 - 21ST CENTURY COOP</option>
    <option value="20000">20000 - 21ST CENTURY COOP</option>
    <option value="30000">30000 - 21ST CENTURY COOP</option>
    <option value="00000">00000 - 3-D CHEMICAL INC</option>
    <option value="1010">1010 - 4 SEASONS COOP BRITTON</option>
    <option value="1001">1001 - 4 SEASONS COOP CLAREMONT</option>
    <option value="1002">1002- 4 SEASONS COOP DOLAND</option>
    <option value="1003">1003 - 4 SEASONS COOP GROTON</option>
    <option value="10030">10030 - 4 SEASONS COOP HECLA</option>
    <option value="10051">10051 - 4 SEASONS COOP PIERPONT</option>
    </Select>
    </div>
    <textarea id="testvalues" rows="100" cols="30"/>
    </body>
    </html>
     
    krazycoder, Jul 4, 2010 IP
  2. anands

    anands Well-Known Member

    Messages:
    436
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    120
    #2
    I would suggest you increase the delay.

    Also, you can have a check if previousKeyStrokeTimeStamp value is more than a particular value, say 3000, you can consider it as a new entry. Otherwise, reset the select items.

    One more thing, I observed that you have not provided validation for keystrokes other than numbers.
     
    anands, Jul 6, 2010 IP