Html select keystroke timeout

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>