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

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，但你可以使用datalist

<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插件方法来实现具有搜索功能的下拉列表。

这里有link示例。

希望这个有用。

Answer 5

我使用名为选择的插件获得了很好的体验： https://harvesthq.github.io/chosen/

或选择2 ： https://select2.github.io/

如果jQuery依赖项没问题......