使用HTML中的<datalist>元素可以创建自动完成输入框。在<input>标签中,使用list属性来关联<datalist>元素的id属性,然后在<datalist>元素中添加<option>元素作为自动完成的选项。用户在输入时,会根据已输入的内容自动匹配<datalist>元素中的选项,并显示在下拉框中供用户选择。
示例代码如下:
<label for="search">搜索:</label>
<input type="text" id="search" name="search" list="options">
<datalist id="options">
<option value="HTML">
<option value="CSS">
<option value="JavaScript">
<option value="Python">
<option value="Java">
</datalist>
在上述代码中,<input>元素中的list属性值为options,与下面的<datalist>元素的id属性值相同,表示它们关联在一起。<datalist>元素中的<option>元素表示自动完成的选项,其中value属性表示选项的值。
注意: <datalist>元素不会在页面中显示,只有在用户输入内容时才会显示自动完成的下拉框。此外,<datalist>元素的选项并不是必选项,用户也可以自由输入其他内容。
更多关于<datalist>元素的详细信息,请参考MDN文档。