本文最初发表于 Rails Designer
我最近不得不添加一个基本的自动完成功能。用户可以使用任何键和任何值添加设置。但他们也可以创建可供选择的预定义设置。
上面的 gif 已经很好地解释了这一点。他们可以在字段中输入任何值,但他们选择预定义的 slug 键。
当你看到这个时,你可能会选择一个 JavaScript 库,比如古老的 selectize.js 或更新的、更轻量级的 tom-select(还有更多!)。虽然这些肯定有其用例,但在这种情况下,我认为我可以使用更简单的东西(至少在该产品所处的早期阶段)。
输入:数据列表。正如您从链接中看到的,支持非常好!
设置起来也超级简单。只是一些 HTML。让我们看看上面的示例是如何完成的:
<form action="#" method="post"> <input list="settings" type="text"> <datalist id="settings"> <option value="slug"></option> <option value="description"></option> <option value="author"></option> </datalist> </form>
就是这样。在要添加“自动完成”的输入字段中,添加一个与 datalist 元素的 id 匹配的列表属性。然后在数据列表中添加您希望自动完成显示的选项。
然后,你就完成了! ?
现在您已经知道如何使用 datalist,了解其优缺点很重要,这样您就可以确定是否可以并且想要使用它。
优点
缺点
这是 HTML 功能之一,如果使用正确,可以帮助您更快地发货。如果您需要更多样式或在某个时候需要大量元素,您可以随时选择自定义解决方案。
以上是使用 Datalist 无需 JavaScript 即可实现基本自动完成的详细内容。更多信息请关注PHP中文网其他相关文章!