使用原生 HTML 自动完成下拉菜单

你可能在 jQuery、React、Vue 等应用中见过带有自动完成功能的下拉菜单。我们大多数人会认为这只有在 JavaScript 的帮助下才能实现。但是，不用 JavaScript 也能实现吗？是的，可以！我偶然发现了一个浏览器支持的 HTML 元素，它也能实现同样的功能。

秘密在于元素本身datalist。如果我们将 a 附加datalist到现有input元素上，就能获得一个带有自动完成功能的原生下拉列表！嘭，它真的起作用了🚀

此外，所有现代浏览器都支持它。

<input list="europe-countries" placeholder="Start typing...">
<datalist id="europe-countries">
  <option>Russia</option>
  <option>Germany</option>
  <option>United Kingdom</option>
  ...
</datalist>

输入开始表现得像一个选择，当我们开始输入时，它会在数据列表的选项内进行搜索。

让我们看看它的实际效果！

难以置信🦄