添加搜索功能到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>