javascript HTML 选择标签自动完成
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/18302036/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML select tag autocomplete
提问by kfirba
I got some select tag as follows:
我得到了一些选择标签,如下所示:
<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>
What I want to do is, whenever the user focus on the select
, and he's clicking on the key "G
" in his keyboard, the option "Grapes
" will be automatically selected, and when he presses "G
" once again, "Ginger
" will be selected and so on.
我想要做的是,每当用户关注select
,并且他G
在键盘上单击“ ”键时,Grapes
将自动选择选项“ ”,当他G
再次按下“ ”时,Ginger
将选择“ ”并很快。
I have no clue how to do it.
我不知道该怎么做。
回答by Abdul Hannan
Well, If you want to add Auto Complete functionality to your html select element then there is nothing better than selectize.js
好吧,如果你想为你的 html select 元素添加自动完成功能,那么没有比 selectize.js 更好的了
All you need to do is either include its css and js file in your project or you can use cdns.
您需要做的就是在您的项目中包含其 css 和 js 文件,或者您可以使用 cdns。
Go to Selectize website here
去这里选择网站
回答by Tushar Gupta - curioustushar
What you are asking for is the default functionality of drop-down-list.
您要求的是下拉列表的默认功能。
if you want to search the drop-down-list you can try this plugin.
如果你想搜索下拉列表,你可以试试这个插件。
jQuery Searchable DropDown Plugin Demo
jQuery Searchable DropDown 插件演示
$('#fruits').searchable();
you can also try DEMO
你也可以试试DEMO
回答by Amith
I think this is the default action of drop down(select control). You have to do zero effort to achieve it.
我认为这是下拉(选择控件)的默认操作。你必须做零努力来实现它。
try this JSbin
.. there is a select box and when user first presses g
on the keyboard grapes is selected
and on second ginger is selected
试试这个JSbin
..有一个选择框,当用户第一次按下g
键盘grapes is selected
和第二次ginger is selected
回答by Rahul
This need no effort to be made. Try it out yourself in any browser. Browser do it for you by default. Try on chrome or any current browser
这不需要努力。在任何浏览器中自己尝试一下。浏览器默认为你做。尝试使用 chrome 或任何当前浏览器
Eg: Facebook page signup form:
例如:Facebook 页面注册表单:
just select the month and press J
只需选择月份并按 J
first it will show january
首先它会显示一月
on second press of J
it will show june.. and so on
第二次按下J
它会显示六月.. 依此类推