krazycoder
Programmer
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>
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>