添加搜索功能到HTML5选择

Question

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select> 

我需要添加一个搜索栏，以便我可以从列表中过滤掉不需要的选项。我需要使用select而我需要在没有插件的情况下执行此操作，这是最简单的方法吗？我尝试使用select2插件，但它搞砸了我的整个应用程序，因为它依赖于前一个开发人员编写的一些逻辑。已经处理了数据填充，因此我不需要做任何事情来填充它。

我还需要指出，我需要能够在文本框中输入内容，html5选择不允许我这样做，并且能够有一个下拉箭头，允许我查看完整列表。我们可以通过一些技巧单独使用html5，或者我需要大量的javascript才能做到这一点吗？

Answer 1

使用<datalist>元素

<label for="cars">Search cars: <input list="cars" name="cars" type="text">
</label>
<datalist id="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</datalist>

Answer 2

击球手你在<datalist>

的立场使用<select>

<input placeholder="Type Car Name" list="cars">
 <datalist id="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
 </datalist>

注意：Internet Explorer 9及更早版本或Safari中不支持datalist标记。

Answer 3

这个答案大约是Q后的1。5年，但也许对某人有帮助。

我知道你说“没有插件”，但你可以看看jQuery Chosen插件。出于类似的原因，我对Select2并不感到疯狂。我现在正在使用Chosen进行可搜索的选择。添加到使用标准选择的现有应用程序相当容易。似乎Chosen使用您现有的Select，隐藏它，但正确标记所选项目，以便表单处理继续工作。可能需要一些样式以适应您的应用程序样式。

某人HTH。