如何将输入放在选择标签的顶部以进行搜索？

Question

我正在尝试制作高级的<select>标记，但是在第一个<option>属性进行搜索之前实现了输入。 像这样：

这是我的代码。 如何在代码中添加<input name="search_category" class="search" /> ？

 select { width: 50%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select size="1" class="selection"> <option>Social</option> <option>Political</option> <option>Cultural</option> <option>Athletic</option> <option>Other</option> </select> 

注意：我使用jQuery。

Answer 1

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_elem_datalist

如果我理解正确的问题，这应该可以解决。

Answer 2

你尝试过jQuery select2吗？

https://select2.github.io/

我认为它将轻松解决您的问题:)

Answer 3

不是Jquery，但是您可以使用数据列表

 <style> input { font-size:1.5em; } </style> <input type="text" placeholder="Select" name="cat" list="cat"> <datalist id="cat"> <option>Social</option> <option>Political</option> <option>Cultural</option> <option>Athletic</option> <option>Other</option> </datalist> 

注意：在chrome中，您将获得选择图标，但可能不是mozilla

Answer 4

您可以使用select2 jquery插件方法来实现具有搜索功能的下拉菜单。

这里有例子的链接 。

希望这对您有所帮助。

Answer 5

我使用名为Chosen的插件取得了很好的经验： https : //harvesthq.github.io/chosen/

或Select2 ： https ： //select2.github.io/

如果jQuery依赖关系还可以...