SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    could not set the options in select dynamically

    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[i].value.indexOf(enteredChars)== 0) {
    selectElement.options[i].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>
    Reply With Quote

  2. #2
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't know if you can override the browser's default response to key presses for a select. How about a textbox next to the dropdown? It could even be hidden. When the dropdown gets focus, shift focus to the textbox and respond to key presses from there, updating the dropdown as needed.

  3. #3
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi r51,

    I tried your idea, it works if the input is text type, if it is hidden then its not working.


    Here is the code:
    <html>
    <head>

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

    function changeFocus(id,e){
    var txtFilter = document.getElementById("selectFilter");
    enteredChars = String.fromCharCode(e.keyCode);
    document.getElementById('testvalues').value = enteredChars;
    txtFilter.value = "";
    txtFilter.focus();
    }

    function filter(id1,id2,e){
    var charCode = String.fromCharCode(e.keyCode);//Get the entered value

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

    var delay = presentKeyStrokeTimeStamp-previousKeyStrokeTimeStamp;//delay between the key strokes
    previousKeyStrokeTimeStamp = presentKeyStrokeTimeStamp ;//make the present keystroke as the previous one for the next one

    if(delay<allowedDelay){//If the difference between key strokes is less than the delay then consider the key strokes as sequence
    enteredChars += charCode;
    }else{
    enteredChars = charCode;
    }
    var op = document.getElementById('testvalues');
    op.value += "\n" + enteredChars; //
    }


    </script>
    </head>

    <body>
    <div align="center">

    <select id="sapCustomerNumber" onkeypress="changeFocus('selectFilter',event)"
    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>
    <input type="hidden" id="selectFilter" value="" onkeypress="filter('selectFilter','sapCustomerNumber',event)"/>
    </div>
    <textarea id="testvalues" rows="100" cols="30" value=""/>
    </body>
    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •