Html选择击键超时 [英] Html select keystroke timeout

问题描述

我正在创建一个带有一百个左右条目的标准html选择下拉列表。我的用户希望能够输入值以更快地获得正确的选择。虽然本机支持此功能，但击键超时非常快，因此如果您不快速键入字符串，则最终选择错误。有没有办法增加超时？或者有没有人编写代码来手动执行此操作？

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?

这是一个用于说明问题的jsFiddle。 JsFiddle

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.

推荐答案

您可以使用< datalist> 代替。它在IE10及更高版本中得到支持。 MDN Page

You could use a <datalist> instead. It's supported in IE10 and higher. MDN Page

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

这篇关于Html选择击键超时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！