HTML选择标记自动完成

Question

我有一些选择标签如下：

<select id="fruits">
   <option value="1">Apple</option>
   <option value="2">Banana</option>
   <option value="3">Orange</option>
   <option value="4">Grapes</option>
   <option value="5">Ginger</option>
</select>

我想要做的是，每当用户专注于select ，并且他点击键盘上的“ G ”键时，将自动选择“ Grapes ”选项，当他再次按下“ G ”时，“ Ginger “将被选中，等等。

我不知道怎么做。

Answer 1

DEMO

您要求的是下拉列表的默认功能。

如果你想搜索下拉列表，你可以尝试这个插件。

jQuery Searchable DropDown插件演示

演示 - 使用您的代码

$('#fruits').searchable();

你也可以试试DEMO

Answer 2

好吧，如果你想为你的html select元素添加自动完成功能，那么没有比selectize.js更好的了

您需要做的就是在项目中包含其css和js文件，或者您可以使用cdns。

在这里访问Selectize网站

Answer 3

我认为这是下拉列表的默认操作（选择控件）。 你必须付出努力来实现它。

尝试这个JSbin ..有一个选择框，当用户第一次按键盘上的g时， grapes is selected第二个ginger is selected

http://jsbin.com/UYeZaPA/1/edit

Answer 4

这不需要付出努力。 在任何浏览器中自己尝试一下。 浏览器默认为您执行此操作。 试试chrome或任何当前的浏览器

例如：Facebook页面注册表格：

只需选择月份并按下J

首先它将显示1月

在J第二次按下它将显示6月 ..依此类推