Html select keystroke timeout - html

Question

I'm creating a standard html select dropdown with a hundred or so entries. My users would like to be able to type in the value to get to the proper selection faster. While this is supported natively, the keystroke timeout is very quick, so if you don't type the string quickly, you end up with the wrong selection. Is there a way to increase the timeout? Or has anyone written code to do this manually?
Here's a jsFiddle to illustrate the issues. JsFiddle
label for="title">Choose your poison</label>
<select id="title" name="title">
<option value="Cider" selected>Apple Cider</option>
<option value="Juice">Apple Juice</option>
<option value="Curacao">Curacao</option>
<option value="Jack">Jack's Hard Cider</option>
<option value="Jake">Jake's Hard Cider</option>
<option value="James">James' Hard Cider</option>
<option value="Jamison">Jamison Irish Whiskey</option>
<option value="Kool">Kool Ade</option>
<option value="Lemonade">Lemonade</option>
<option value="Prune">Prune Juice</option>
</select>
Try selecting the Jack's or Jake's by slowly typing and see if you end up selecting Curacao or Kool Ade.

Answer 1

You could use a <datalist> instead. It's supported in IE10 and higher. MDN Page
DEMO
<label for="poison">Choose your poison</label>
<input id="poison" name="poison" list="poisons" />
<datalist id="poisons">
<option value="Cider" selected>Apple Cider</option>
<option value="Juice">Apple Juice</option>
<option value="Curacao">Curacao</option>
<option value="Jack">Jack's Hard Cider</option>
<option value="Jake">Jake's Hard Cider</option>
<option value="James">James' Hard Cider</option>
<option value="Jamison">Jamison Irish Whiskey</option>
<option value="Kool">Kool Ade</option>
<option value="Lemonade">Lemonade</option>
<option value="Prune">Prune Juice</option>
</datalist>

Answer 2

If you have a small number of entries, the answer using datalist is fantastic. However, my users were using lists that had over a hundred entries and the datalist won't scroll. So, I built a utility class for use in a few places.
To use it, create the listFilter and initialize it with your list of choices. Then hook up keyUp and keyPress and use the return values. The class uses a 2-second time out and actually filters the answers. Using the delete key, you can clear the filtering. Be sure to check for a null return value in the keyUp, since that only handles the delete key. Note that the dropdown must be unexpanded for you to get the key events to work.
var listFilter = {
originalListToHold: [],
time1: 1,
search: "",
initialize: function(originalListToCopy) {
this.originalListToHold = [];
for (var i = 0; i < originalListToCopy.length; i++) {
this.originalListToHold[i] = originalListToCopy[i];
}
},
isInOriginalList: function(member) {
return this.originalListToHold.indexOf(member) > 1;
},
keyUpEvent: function(event) {
var keyCode = event.keyCode;
if (keyCode == 46) {
var filtered = this.filterList("");
this.search = "";
event.stopPropagation();
return filtered;
} else {
return null;
}
},
keyPressEvent: function(event) {
//The delete key will reset the list. See the key up event above.
var val = String.fromCharCode(event.which).toUpperCase();
var timenow = event.timeStamp;
var timeDiff = timenow - this.time1;
if (!isNaN(timeDiff)) {
//If the time difference is < 2 seconds (2000 ms), then we
//will search the options.
if (timeDiff > 2000) {
//Reset the search string
this.search = "" + val;
} else {
this.search = this.search + val;
}
} else {
this.search = "" + val;
}
this.time1 = timenow;
//Now, let's filter the options by the search string.
var filtered = this.filterList(this.search);
event.stopPropagation();
return filtered;
},
filterList: function(filter) {
var newList = [];
for (var i = 0; i < this.originalListToHold.length; i++) {
if (this.originalListToHold[i].indexOf(filter) > -1) {
newList.push(this.originalListToHold[i]);
}
}
return newList;
}
}