使用HTML5数据师轻量级自动完成控件-css教程-PHP中文网

在本教程中，我们将深入了解少量使用的HTML5 元素。它可以实现不需要JavaScript的轻巧，易于访问，跨浏览器自动完成的表单。

钥匙要点

html5` `元素为自动完整的表单控件提供了轻巧，易于访问和跨浏览器解决方案，而无需依赖JavaScript。

> `，````````````'>```````'

浏览器对 `在包括Internet Explorer 10和11在内的现代浏览器中具有强大的功能，其中可用于旧浏览器的后备选项使用`>'和文本输入的组合。 🎜>

' `元素不能直接用CSS来设计，该元素可以限制自定义，但可以确保在不同的浏览器和平台上保持一致性。

>诸如Ajax之类的增强功能可以与`` >'' `以基于用户输入的动态填充选项，改善功能和用户体验需要实时数据反馈的应用程序。 >

？ >有什么问题 当您希望用户从少量选项中进行选择时， > html5 控件是理想的选择。它们在以下情况时不太实用： 有很多选择，例如国家或职位标题 用户想要输入自己的选项，该选项不在列表中 > 明显的解决方案是自动完成控制。这允许用户输入几个字符，该字符限制了可快速选择的选项。 > 在您开始键入时会跳到正确的位置，但这并不总是显而易见的。它不会在所有设备（例如触摸屏）上使用，并且在一两秒钟内重置。 >

>开发人员通常会转向许多JavaScript供电的解决方案之一，但是自定义的自动完成控制并不总是必要的。 HTML5 元素是轻巧，可访问的，并且没有JavaScript依赖关系。您可能已经听说过它是越野车或缺乏支持。在2021年，情况并非如此，但是有浏览器的不一致和警告。 快速启动 从包含200多个选项的列表中挑选您的国家是自动完成控制的理想选择。在HTML页面中直接在每个国家 /地区定义 元素： 然后可以通过任何字段中的列表属性来引用数据师的ID：

>令人困惑的是，最好将AutoComplete =“ OFF”设置。这样可以确保在 中显示用户的值，但不在浏览器中输入的值。 。

结果：

这是Microsoft Edge中的默认渲染。其他应用程序实现了相似的功能，但外观在平台和浏览器之间有所不同。

> 选项 使用标签作为的文本孩子很常见： >

id ="countrydata" > > Afghanistan > > Åland Islands > > Albania > > Algeria > > American Samoa > > Andorra > > Angola > > Anguilla > > Antarctica > ...etc... > 登录后复制 登录后复制 登录后复制 登录后复制 使用一个值属性产生相同的结果：

for ="country" > country > type ="text" list ="countrydata" id ="country" name ="country" size ="50" autocomplete ="off" /> 登录后复制 登录后复制 登录后复制 > 注意：闭合 />斜杠在HTML5中是可选的，尽管它可以帮助防止编码错误。 >您还可以使用以下任何一种格式根据所选标签设置值。 >选项1：

>选项2：

在两种情况下，当选择有效的选项时，输入字段均设置为1、2或3 id ="mylist" > > label one > > label two > > label three > > 登录后复制 登录后复制 chrome显示了带有值和标签的列表。一旦选择了一个选项，只有该值保留。

> Firefox仅显示标签的列表。选择一个选项后，它将切换到该值。 id ="mylist" > value ="label one" /> value ="label two" /> value ="label three" /> > 登录后复制 登录后复制 边缘仅显示值。

> 以下codepen示例显示了所有变体： >请参阅pen html5 sitepoint（@sitepoint） 上的自动完成示例。 实现将不断发展，但目前，我建议您不要使用价值和标签，因为它可能会使用户混淆。

（下面讨论了解决方法。） autocomplete examples" data-slug-hash="jOVqGaJ" data-theme- data-user="SitePoint" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"> > 浏览器支持和后备

元素在现代浏览器以及Internet Explorer 10和11中得到了很好的支持

>

有几种实施说明，但不会影响大多数用法。最糟糕的情况是一个字段恢复为标准文本输入。 如果您绝对必须支持IE9及以下，则有一个后备模式，该模式在 失败时使用标准 与文本输入结合使用。改编国家示例： id ="countrydata" > > Afghanistan > > Åland Islands > > Albania > > Algeria > > American Samoa > > Andorra > > Angola > > Anguilla > > Antarctica > ...etc... > 登录后复制 登录后复制 登录后复制 登录后复制 autocomplete fallback" data-slug-hash="GRNZMyx" data-theme- data-user="SitePoint" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">请参阅pen html5 sitepoint（@sitepoint） 上的自动完成后返回。

>

在现代浏览器中，元素成为 的一部分，而 ”或其他标签未显示。它看起来与上面的示例相同，但是乡村的形式值将设置为一个空字符串。 在IE9及以下，（非常长的） 和文本输入字段都处于活动状态： >

两个值都可以在旧的IE中输入。您的申请必须要么：

确定哪个最有效的或 >

>使用一个小的JavaScript函数重置另一个函数

>在非文本控件上使用 基于铬的浏览器也可以将 值应用于： > >具有“日期”类型的输入。用户可以从定义为yyyy-mm-dd值的一系列选项中进行选择，但以其语言环境格式呈现。

>具有“颜色”类型的输入。用户可以从定义为六位数六位数值的颜色选项中选择（三位数值不起作用）。 >

>具有“范围”类型的输入。滑块显示刻度标记，尽管这并不能限制可以输入哪个值。 >

>在其他输入类型上，请参见pen html5 sitepoint（@sitepoint） 上的其他输入类型。

CSS样式 on other input types" data-slug-hash="abBNLqZ" data-theme- data-user="SitePoint" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">如果您曾经挣扎过样式 盒子， …您很容易！ 可以将其视为正常的样式，但是链接的 及其子元素不能在CSS中进行样式。列表渲染完全由平台和浏览器确定。

> 我希望这种情况能有所改善，但是目前，在MDN提出了一种解决方案，该解决方案：

覆盖默认浏览器行为 >有效地对待 ，因此可以在CSS 中进行样式 重复JavaScript中的所有自动完整功能

>我已经进一步增强了它，并且代码可在GitHub上使用。要使用它，请作为ES6模块中的HTML页面中的任何位置加载脚本。可以使用JSDELIVR CDN URL：

id ="countrydata" > > Afghanistan > > Åland Islands > > Albania > > Algeria > > American Samoa > > Andorra > > Angola > > Anguilla > > Antarctica > ...etc... > 登录后复制 登录后复制 登录后复制 登录后复制 >，如果您使用的是捆绑器： ，则可以使用NPM安装它：

for ="country" > country > type ="text" list ="countrydata" id ="country" name ="country" size ="50" autocomplete ="off" /> 登录后复制 登录后复制 登录后复制 >您的 元素必须使用 value 格式。例如：

id ="mylist" > > label one > > label two > > label three > > 登录后复制 登录后复制 > 注意： 无法使用，因为它会导致无法定型的空元素！ > 然后可以添加

CSS以样式一些或全部 和元素。例如：

id ="mylist" > value ="label one" /> value ="label two" /> value ="label three" /> > 登录后复制 登录后复制 >示例：

>请参阅pen autocomplete CSS styling" data-slug-hash="JjbXrvE" data-theme- data-user="SitePoint" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">html5 autocomplete css findling by sitepoint（@sitepoint） > codepen。

>造型有效，但是值得付出努力吗？

我不怀疑…… >

>重新实现浏览器的标准键盘，鼠标和触摸控件，并具有合理的可访问性。 MDN示例不支持键盘事件，尽管我试图改进该事件，但某些设备上不可避免地会有问题。 > >您依靠200行JavaScript来解决CSS问题。它的缩小为1.5kb，但是如果您在同一页面上需要许多 元素，则可能会引入性能问题。 如果JavaScript是必需的，最好使用更漂亮，更一致，经过战斗测试的JavaScript组件？ >当JavaScript失败时，控件返回到标准的HTML5 而无需样式，但这是一个较小的好处。 > 创建AJAX-增强

>假定您的设计师很乐意接受浏览器样式差异，可以使用JavaScript增强标准 功能。例如： 实现可选验证，该验证仅接受 。 中的已知值

set ajax调用搜索apis的数据中的元素。 > 选择选项时 设置其他字段值。例如，在隐藏的输入中选择“美国”将“我们”设置为“我们”。 尽管有几个编码注意事项，代码主要需要重新定义元素： 进入最小数量的字符。 键入事件应为 拒绝 。也就是说，仅一旦用户停止键入至少半秒，就会触发AJAX调用。 >查询结果应该被缓存，因此不必重复或解析相同的呼叫。 > 不必要的查询应避免。例如，输入“ Un” 返回12个国家。无需进一步呼吁 >“单位” >或 “ united” >，因为所有结果选项都包含在原始12个结果中。 >我已经为此创建了一个标准的Web组件，并且该代码在GitHub上可用。下面的Codepen示例允许您在输入至少两个字符后选择一个有效的国家。然后，音乐艺术家自动完成，然后返回起源于该国的艺术家，名字与搜索字符串相匹配： 请参见Pen html5 ajax autocomplete by sitepoint（@sitepoint） > codepen。

with Ajax autocomplete" data-slug-hash="ExNKwRy" data-theme- data-user="SitePoint" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"> >国家查找API由RESTCOUNTRIES.EU提供 音乐艺术家查找API由Musicbrainz.org提供

在您自己的应用程序中使用它，将脚本在HTML页面中的任何位置加载为ES6模块。可以使用JSDELIVR CDN URL：

>，如果您使用的是捆绑器： ，则可以使用NPM安装它： >用子创建一个元素，以用作数据输入字段。例如，国家查找使用以下方式： 元素属性：

属性 描述

API REST API URL（必需）

resultdata 包含返回API JSON中对象的结果数组的属性的名称（如果仅返回结果，则不需要）

结果名 每个结果对象中属性的名称与搜索输入匹配，用于Datalist elements（必需）

Querymin 触发搜索之前要输入的字符数量最小数（默认：1）

inputdelay 在搜索之前，在关键点之间等待毫秒的最小时间（默认访问：300）

OptionMax 显示的最大数量自动完成选项（默认值：20）

有效的 如果设置，当选择无效的值时，显示此错误消息

>其余的URL必须至少包含一个$ {id}标识符，该标识符由该ID的中设置的值代替。在上面的示例中，api url中的$ {country}引用了子中的值，该值具有“ country”的ID。 URL通常会使用子输入，但是可以引用页面上的任何其他字段。

restcountries.eu api返回一个对象或包含乡村数据的对象。例如：

id ="countrydata" > > Afghanistan > > Åland Islands > > Albania > > Algeria > > American Samoa > > Andorra > > Angola > > Anguilla > > Antarctica > ...etc... > 登录后复制 登录后复制 登录后复制 登录后复制 不需要设置resultdata属性，因为这是返回的唯一数据（没有包装器对象）。结果名称属性必须设置为“名称”，因为该属性用于填充Datalist elements。 选择选项时，可以自动填充其他字段。以下输入接收“ alpha2code”和“ region”属性数据，因为已经设置了数据AUTOFILL属性： >

datalist-ajax如何工作

如果您不想阅读230行代码并保持魔术的活力！ for ="country" > country > type ="text" list ="countrydata" id ="country" name ="country" size ="50" autocomplete ="off" /> 登录后复制 登录后复制 登录后复制 >代码最初在 中创建一个新的 ，它使用列表属性将其连接到子。输入事件处理程序监视并在输入最小数量的字符并且用户仍未键入时调用runquery（）函数。 > > runquery（）从表单中的数据中构建API URL，并使用fetch api进行AJAX调用。解析返回的JSON，然后构造一个可重复使用的DOM片段，并将其放置在缓存中。 >

> datalistupdate（）函数被调用，该函数用适当的缓存DOM片段更新 。如果查询已经被缓存或可以使用以前的查询，请访问runquery（）避免访问ajax调用。 >

>更改事件处理程序还监视，当焦点从字段移动并且值已修改时，它会触发。该函数检查该值是否匹配已知选项，并在必要时使用约束验证API显示在有效属性中提供的错误消息。

>假设已经选择了有效的选项，则使用匹配的数据AUTOFILL属性将更改处理程序函数填充所有字段。保留对自动填充字段的引用，以便如果随后输入无效的选项，则可以重置它们。 >

请注意，Shadow dom是 未使用的。这样可以确保自动完成（和 ）元素可以由CSS进行样式，并在必要时由其他脚本访问。 dunkin’ > HTML5 有局限性，但是如果您需要简单的框架 - 无术自动完整字段，则是理想的选择。缺乏CSS支持是可耻的，但是浏览器供应商最终可能会解决该监督。

>本教程中显示的任何代码和示例均可用于您自己的项目。 使用HTML5 Datalist

>什么是HTML5 DataList元素，它如何工作？ >>我如何将html5数据级使用html5 datalist用于autoComplete？

需要将数据师与输入字段相关联。这是通过将列表属性添加到输入字段并将其值设置为数据师ID来完成的。然后，浏览器将根据用户的输入和Datalist中的定义选项建议自动完成选项。 >我可以在所有浏览器中使用HTML5 DataList元素吗？ 大多数现代浏览器，包括Chrome，Firefox，Safari和Edge。但是，Internet Explorer 9和更早版本中不支持它。您可以在网站上查看当前的浏览器兼容性，例如我可以使用。 > >不幸的是，我如何设置HTML5 DataList选项？

，HTML5 DATALIST元素的样式选项非常有限。下拉列表的外观由浏览器控制，无法通过CSS自定义。但是，您可以为与数据师关联的输入字段进行样式。 > >我可以将多个数据师用于单个输入字段吗？ 不，您不能将多个数据师与单个输入字段相关联。输入字段的列表属性只能采用一个ID，该ID与一个数据库相对应。如果您需要提供多组选项，则可能需要使用JavaScript根据用户输入动态更改选项。

> >我可以将HTML5 Datalist与其他输入类型一起使用吗？ ，HTML5 DataList可以与各种输入类型一起使用，包括文本，搜索，电话，电子邮件，日期，月，每周，时间，时间，日期，本地，数字，范围，范围和颜色。但是，对某些输入类型（例如范围或颜色）的自动完成功能可能无法正常工作。 我可以使用SELECT元素使用HTML5 Datalist？与选择元素一起使用。数据师旨在为输入字段提供自动完成建议，而SELECT元素提供了选项的下拉列表。如果您需要下拉列表，则应使用Select element。删除或更改选项。但是，请记住，数据师不支持Onchange或OnClick之类的事件。您需要将事件侦听器添加到关联的输入字段中。

>我可以将HTML5 DataList用于搜索字段吗？ 我可以使用textarea的html5数据库来使用html5 dataList？

不，html5 dataList不能与textarea一起使用。 。数据师旨在为输入字段提供自动完成建议，而不是针对文本方面的建议。如果您需要用于文本方面的自动完成功能，则可能需要使用JavaScript库或构建自己的解决方案。

使用HTML5数据师轻量级自动完成控件

明显的解决方案是自动完成控制。这允许用户输入几个字符，该字符限制了可快速选择的选项。>

覆盖默认浏览器行为

大多数现代浏览器，包括Chrome，Firefox，Safari和Edge。但是，Internet Explorer 9和更早版本中不支持它。您可以在网站上查看当前的浏览器兼容性，例如我可以使用。

，HTML5 DATALIST元素的样式选项非常有限。下拉列表的外观由浏览器控制，无法通过CSS自定义。但是，您可以为与数据师关联的输入字段进行样式。

>我可以将多个数据师用于单个输入字段吗？