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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 11:23:06  来源:igfitidea点击:

HTML select tag autocomplete

javascriptjqueryhtml

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

DEMO

演示

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 插件演示

DEMO - with your code

演示 - 使用您的代码

$('#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 gon the keyboard grapes is selectedand on second ginger is selected

试试这个JSbin..有一个选择框,当用户第一次按下g键盘grapes is selected和第二次ginger is selected

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

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

回答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 Jit will show june.. and so on

第二次按下J它会显示六月.. 依此类推