温馨提示×

form表单中如何实现自动补全功能

小樊
111
2024-06-29 19:08:38
栏目: 编程语言
开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

要实现自动补全功能,可以使用HTML5的datalist元素结合input元素来实现。

首先,在form表单中添加一个input元素,并设置其type为"text",然后为该input元素添加一个list属性,并设置其值为一个datalist元素的id。例如:

<form>
  <label for="fruit">选择水果:</label>
  <input type="text" id="fruit" list="fruits">
  <datalist id="fruits">
    <option value="苹果">
    <option value="香蕉">
    <option value="橙子">
    <option value="西瓜">
    <option value="葡萄">
  </datalist>
  <input type="submit" value="提交">
</form>

在上面的示例中,datalist元素中包含了一些选项,当用户在input元素中输入内容时,浏览器会自动显示datalist中匹配的选项,用户可以通过键盘的上下箭头选择其中一个选项,然后点击提交按钮。

这样就实现了简单的自动补全功能。需要注意的是,datalist元素并不支持所有浏览器,所以在使用时需要进行兼容性考虑。

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

推荐阅读:如何在codeblocks中实现代码自动补全功能

0