您可以使用HTML5中的<datalist>
元素来创建可搜索的自动完成下拉列表。下面是一些步骤:
<input>
元素,并将其list
属性设置为一个与<datalist>
元素的id
属性相同的值。例如:<input type="text" list="fruits">
<datalist>
元素,并为其指定一个id
属性,该属性与<input>
元素的list
属性相同。在<datalist>
元素中,您可以使用<option>
元素来列出所有可能的选项。例如:<datalist id="fruits">
<option value="Apple">
<option value="Banana">
<option value="Cherry">
<option value="Grape">
<option value="Orange">
<option value="Pineapple">
</datalist>
<input>
元素中开始输入时,浏览器将显示一个下拉列表,其中包含与用户输入匹配的选项。用户可以选择一个选项,或者继续输入以缩小选项。可以看到,使用<datalist>
元素创建自动完成下拉列表非常简单。此外,您还可以使用JavaScript和CSS来自定义下拉列表的外观和行为。
重要关键词:<datalist>
元素, list
属性, <input>
元素, <option>
元素.