Flexdatalist –具有以下功能的自动完成插件 支持

HTML5 <datalist>元素在现代前端开发中非常有用。 但是，这是许多开发人员都不知道的那些元素之一。

它适用于输入字段，您可以在其中自动建议输入的某些值 。 默认设置看起来还可以，我们已经介绍了一些有关使用自动建议的数据列表构建炫酷效果的编码技巧 。

但是， 使用诸如Flexdatalist之类 的插件要容易得多 。 它支持各种浏览器，并允许您完全自定义数据列表的设计 。

并非每个人都需要自动完成功能，并且对于本机HTML5数据列表，您可能不会为插件而烦恼。 但是，Flexdatalist可能是其中最好的一种，因为它基于本机数据列表行为来添加：

• 移动响应支持
• 每个项目的额外说明
• 一次选择多个选项
• 自定义事件处理程序

它们全部由jQuery提供支持 ，因此您将需要最新版本的副本才能运行此程序。 它还带有自己CSS样式表 ，您可能希望将其合并到单个CSS文件中以减少HTTP请求。

您可以在主要的演示页面上找到完整的设置说明 ，其中包括指向Flexdatalist文件的下载链接 。

只需一行JavaScript ，设置起来就非常简单。 默认情况下，该插件使用.flexdatalist类定位所有输入 ，因此仅将其添加到代码中就足以查看结果。

您只需在输入字段中添加<datalist>元素，Flexdatalist即可处理其余的内容。 它将自动设置列表样式 ，包括可选的描述性文本。

添加额外文本的最简单方法是通过JSON文件 ，您可以通过数据属性将其附加到输入中 。

例如，如果您查看Flexdatalist演示页面，您将找到一个带有属性data-data='countries.json'的“ Countries”输入字段。 这引用了一个远程文件，该文件在外部存储所有原始输入数据 。

这些字段太多，您可以稍微放慢页面的速度 。 但是，我无法想象许多站点可以在一个页面上运行多个这样的数据列表表单，更不用说即使使用此jQuery插件，它们仍然非常快 。

首先，只需访问GitHub存储库并下载一个副本 。 这包括一个指向主演示页面的链接，该页面还提供了完整的设置文档，JavaScript选项以及大量示例代码片段。

翻译自: https://www.hongkiat.com/blog/flexdatalist-jquery-plugin/