Could not set the options in select dynamically

JavaScript
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 += "
“+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

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&lt;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  +=  "\

" + enteredChars; //
}

</script>
</head>

<body>
<div align=“center”>

    &lt;select id="sapCustomerNumber"   onkeypress="changeFocus('selectFilter',event)"
            onclick="resetValues()"&gt;
             &lt;option value="10000"&gt;10000 - 21ST CENTURY COOP&lt;/option&gt;
             &lt;option value="20000"&gt;20000 - 21ST CENTURY COOP&lt;/option&gt;
             &lt;option value="30000"&gt;30000 - 21ST CENTURY COOP&lt;/option&gt;
             &lt;option value="00000"&gt;00000 - 3-D CHEMICAL INC&lt;/option&gt;
             &lt;option value="1010"&gt;1010 - 4 SEASONS COOP BRITTON&lt;/option&gt;
             &lt;option value="1001"&gt;1001 - 4 SEASONS COOP CLAREMONT&lt;/option&gt;
             &lt;option value="1002"&gt;1002- 4 SEASONS COOP DOLAND&lt;/option&gt;
             &lt;option value="1003"&gt;1003 - 4 SEASONS COOP GROTON&lt;/option&gt;
             &lt;option value="10030"&gt;10030 - 4 SEASONS COOP HECLA&lt;/option&gt;
             &lt;option value="10051"&gt;10051 - 4 SEASONS COOP PIERPONT&lt;/option&gt;
    &lt;/Select&gt;
    &lt;input type="hidden" id="selectFilter" value="" onkeypress="filter('selectFilter','sapCustomerNumber',event)"/&gt;
&lt;/div&gt;
&lt;textarea id="testvalues" rows="100" cols="30" value=""/&gt;

</body>
</html>

3

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.