html - 你如何在 html 中实现自定义自动完成列表？

Question

我想了解一个简单的自动搜索结果文本框。

现在，当用户在文本框中键入一个字符串并将其存储在一个数组中时，我已经设置了 javascript 事件来进行 ajax 调用并从服务器获取搜索结果。因此，我有一个包含我的搜索结果的 javascript 数组。

 var searchResult = [
 "Accordion Company",
 "A Little Mouse",
 "Another Time",
 "ASIO"
 ];

我想将此列表附加到文本框的某些属性(或其他内容)，以便我的列表在用户键入时显示为下拉列表。

文本框是否允许这样做？什么 HTML 控件/属性允许显示自动完成列表？

背景:

1) 我使用过 jQueryUI，所有这些都可以在那里很容易地实现。我有兴趣了解如何覆盖文本框的固有属性以显示自动完成结果？如果我将所有内容都剥离为简单的 HTML 和 javascript，这是如何实现的？或者它只是一个看起来像下拉菜单的 HTML/CSS 技巧

2) 我也研究过 vCard 但无法弄清楚如何使用包含搜索结果的 javascript 数组覆盖 vCard 数组。

只是想了解我是否可以告诉我的 INPUT type="text" 控件显示自定义自动完成列表。

谢谢!

Answer 1

有list属性和关联的datalist标签

<input list="things">
<datalist id="things">
  <option value="Some">
  <option value="No">
  <option value="Any">
</datalist>

您可以使用您的数组并构建一个数据列表元素。
datalist 是 html5，所以支持可能是个问题。