HTML5 Datalists: 它们是什么以及什么时候使用它们

分享于 

21分钟阅读

Web开发

  繁體

自动补全是所有网络用户都熟悉的Pattern。 当你搜索时你的搜索引擎会建议。 当你键入新的E-mail 邮件时,邮件客户端建议收件人。 但是,这个功能对于没有一个平均的JavaScript数量的Web开发人员来说并没有。 一个新的HTML5元素,<datalist>,将这个自动完成功能本地化为 Web。

在本文中,我将描述datalists是什么,当适合使用它们时,它们的限制和对不支持它们的浏览器。 让我们开始吧。

创建 Datalists

要展示datalist如何工作,让我们从传统的文本输入开始:

<labelfor="favorite_team">Favorite Team:</label><inputtype="text"name="team"id="favorite_team">

这个字段要求用户提供他或者她喜欢的运动团队。 默认情况下,将不给用户额外的帮助来完成字段。 但是,使用 datalist,你可以提供用户可以从中选择来完成字段的选项列表。 为此,请为每个建议定义一个带有选项元素的datalist:

<datalist><option>Detroit Lions</option><option>Detroit Pistons</option><option>Detroit Red Wings</option><option>Detroit Tigers</option><!-- etc... --></datalist>

为了将datalist绑定到输入元素,给出输入元素列表属性和 MATCH的a 属性。 下面是一个示例:

<labelfor="favorite_team">Favorite Team:</label><inputtype="text"name="team"id="favorite_team"list="team_list"><datalistid="team_list"><option>Detroit Lions</option><option>Detroit Pistons</option><option>Detroit Red Wings</option><option>Detroit Tigers</option><!-- etc... --></datalist>

注意,输入的列表属性和datalist的id属性包含相同的值,"team_list"。 这提供了两者之间的链接。

就是这样。不需要JavaScript来做一个datalist工作。 图显示了用户在键入 D 之后在支持浏览器中看到了什么。

图 1.Datalist显示( 左上方: IE 10 ;右上角: Firefox 18 ;左下角: Chrome 24 ;右下角: Opera 12 )

注意:IE 和 Opera 不要求用户在看到建议之前键入字符,而 Firefox 和 Chrome 则不要求用户键入字符。

选项元素也可以有 value 属性。 当用户可能不知道与给定选项关联的代码时,这很有用。 考虑以下 美国 状态输入:

<labelfor="state">State:</label><inputtype="text"name="state"id="state"list="state_list"><datalistid="state_list"><optionvalue="AL">Alabama</option><optionvalue="AK">Alaska</option><optionvalue="AZ">Arizona</option><optionvalue="AR">Arkansas</option><!-- etc --></datalist>

用户将看到完整状态名称列表,但是当用户做出选择时,文本输入将用状态代码填充,而不是完整的NAME 文件。 一个例子显示在图 2.

图 2.选择具有相应值的Datalist选项( Firefox 18 )

自动完成属性

如果datalists中的和图 2 看起来很熟悉,这是因为浏览器已经实现了很长时间的自动补全。 所有浏览器都有一些存储用户输入的机制,供以后自动补全使用。

作者可以使用自动完成属性来控制浏览器是否应尝试自动完成用户的数据。 可能的值显示在下面的示例中:

<form><!-- If the autocomplete attribute is not specified, it inherits the value
 of its parent form element. If not specified, the default value of the
 form's autocomplete attribute is"on". Since neither this input nor its
 form have the attribute specified, the"on" state will be used.
 --><inputtype="text"name="firstName"><!-- The"on" state indicates that the browser can remember the value for future
 use as well as suggest previously stored values.
 --><inputtype="text"name="address"autocomplete="on"><!-- The"off" state tells the browser neither to store the value entered for
 this input nor to suggest previously entered values. This should be
 used if the data is sensitive or the value will never be reused.
 --><inputtype="text"name="secret"autocomplete="off"></form>

那么,自动完成属性与datalists的区别是什么? 属性告诉浏览器是否根据先前输入为完成提供用户选项,以及是否存储输入的值以便将来完成。 Datalists是作者提供的建议列表,无论以前的输入如何,总是显示这些建议。

警告:将autocomplete属性设置为"关闭"会阻止datalists在 Opera 中显示。 下面是一个示例:

<!--This datalist will never display in Opera because the autocomplete attribute
is set to"off". It will display in all other supporting browsers.--><inputtype="text"list="pets"autocomplete="off"><datalistid="pets"><option>Cat</option><option>Dog</option><option>Hamster</option><option>Turtle</option></datalist>

其他输入类型

尽管自动自动补丁与文本输入相关,但datalists也可以用于一些新的HTML5输入类型。 考虑范围输入类型,该类型允许创建 slider 窗体元素。 通过将它与一个datalist结合起来,你可以向用户建议范围上的点。

例如以下输入要求用户在 $5和 $200美元之间提供捐赠。

<labelfor="donation">Donation Amount (USD):</label><inputtype="range"name="donation"id="donation"list="donation_list"step="5"min="5"max="200"><datalistid="donation_list"><option>25</option><option>50</option><option>100</option><option>200</option></datalist>

图 3显示了 Chrome 24和 IE的范围输入的范围输入。

图 3。Datalist ( Chrome 24 )的范围输入

图 4.Datalist ( IE 10 )的范围输入

可以看到每个浏览器都为所提供的每个datalist选项显示一个记号标记。 这里外,当用户在附近移动 slider 时,Chrome 将将 slider 捕捉到这些预定义值。

不幸的是,IE 和 Chrome 是目前唯一支持datalists范围输入的浏览器。 图 5 在现代浏览器中显示datalists对常见输入类型的支持。

图 5.表单输入类型中Datalists的浏览器支持

什么时候使用 Datalist

由于datalists没有内置机制要求用户选择提供的选项,所以它们非常适合接受任何值的输入。 在这里提供一个运动团队的早期例子。 在datalist建议的团队中,用户可以随意输入任何值。

相反,美国 状态示例失败,因为有一组有限的值,用户必须提供该测试。 这样的用例更好地由select元素处理,因为它强制选择。

一个例外是具有大量有效选择的输入。 例如考虑一下传统的国家下拉列表,如图所示的

图 6.标准国家/地区

列表强迫用户筛选数百个选项来查找他们寻找的内容,从而阻止用户。 由于用户可以通过键入一个或者两个字符快速筛选列表,所以自动完成功能适合这里用例。

下面是如何使用datalist实现国家选择的方法:

<labelfor="country">Country:</label><inputtype="text"id="country"list="country_list"><datalistid="country_list"><optionvalue="AF">Afghanistan</option><optionvalue="AX">Åland Islands</option><optionvalue="AL">Albania</option><optionvalue="DZ">Algeria</option><!-- more --></datalist>

图 7 显示了用户在键入U 之后会看到什么。

图 7.国家表单域的Datalist方法

强制值

虽然datalists并不本机地允许选择选项,但是你可以轻松地添加这样的验证。 例如下面的代码使用 HTML5约束验证API插件来添加此类验证:

// Find all inputs on the DOM which are bound to a datalist via their list attribute.var inputs = document.querySelectorAll('input[list]');for (var i = 0; i < inputs.length; i++) {
 // When the value of the input changes... inputs[i].addEventListener('change', function() {
 var optionFound = false,
 datalist = this.list;
 // Determine whether an option exists with the current value of the input.for (var j = 0; j < datalist.options.length; j++) {
 if (this.value == datalist.options[j].value) {
 optionFound = true;
 break;
 }
 }
 // use the setCustomValidity function of the Validation API// to provide an user feedback if the value does not exist in the datalistif (optionFound) {
 this.setCustomValidity('');
 } else {
 this.setCustomValidity('Please select a valid value.');
 }
 });
}

在所有支持datalists的浏览器中实现约束验证 API,因此,如果datalist工作正常,验证应该同样有效。 当用户尝试提交带有 datalist ( 而且他们还没有选择)的表单时,他们将看到显示为的错误。

图 8.约束验证API错误( IE 10 )

注意,约束验证API不会消除服务器端验证的需要。 使用旧浏览器的用户将不能使用约束验证 API,恶意用户可以很容易地破坏客户端脚本。

虽然这种方法在现代浏览器中有效,但是它给运行浏览器的用户提供了一个。 用户被告知他们必须选择一个有效的值,但如果他们的浏览器不支持 datalists,则不能看到。 因此,如果打算使用这种方法,就必须提供一个在所有浏览器中都能工作的UI。 这可以通过检测浏览器是否支持datalists然后适当地进行polyfilling来实现。

Unsupporting浏览器

撰写本文时,IE 10.Firefox 4 +。Chrome 20 + 和 Opera 支持文本输入,遗憾的是,这将省去大量的用户和用户。

许多新的HTML5特性不同,对于大多数用例来说,不需要在不支持datalists的浏览器中做额外的工作。 默认情况下,提供的选项列表仅仅是建议;因这里,缺少支持的用户只需填写文本字段。

但是,一些回退选项可以为运行unsupporting浏览器的用户提供更丰富的体验。

回退到备用HTML内容

推广了一个选项,popularized利用不支持datalist元素的浏览器仍然向用户显示子元素。 下面显示了如何使用 <选择> 更改和回退国家/地区示例:

<labelfor="country">Country:</label><datalistid="country_list"><selectname="country"><optionvalue="AF">Afghanistan</option><optionvalue="AX">Åland Islands</option><optionvalue="AL">Albania</option><optionvalue="DZ">Algeria</option><optionvalue="AS">American Samoa</option><!-- more --></select> If other, please specify:</datalist><inputtype="text"name="country"id="country"list="country_list">

支持datalists的浏览器中的UI不会改变,但是使用浏览器的用户现在看到了一个选项和文本框。 这显示在图 9

图 9.Datalists的选择回退( IE 9 )

Polyfilling

选择回退所不提供的功能之一是datalists提供的自动完成行为。 如果对于添加的datalists非常重要,第二个回退选项是polyfill实现。

首先,首先需要确定用户的浏览器是否支持 datalists。 流行的特征检测插件库提供了这样的测试,如下面所示:

if (Modernizr.input.list) {
 //The browser supports the list attribute and datalists. } else {
 //The browser supports neither the list attribute nor datalists. }
}

使用这种方法,你现在可以为unsupporting浏览器中的用户创建一个polyfill实现。 虽然有几个polyfills可用,但对于,我更喜欢使用jQuery的ui小部件自动完成。 下面的代码演示了polyfill实现:

var datalist,
 listAttribute,
 options = [];// If the browser doesn't support the list attribute...if (!Modernizr.input.list) {
 // For each text input with a list attribute... $('input[type="text"][list]').each(function() {
 // Find the id of the datalist on the input// Using this, find the datalist that corresponds to the input. listAttribute = $(this).attr('list');
 datalist = $('#' + listAttribute);
 // If the input has a corresponding datalist element...if (datalist.length> 0) {
 options = [];
 // Build up the list of options to pass to the autocomplete widget. datalist.find('option').each(function() {
 options.push({ label: this.innerHTML, value: this.value });
 });
 // Transform the input into a jQuery UI autocomplete widget. $(this).autocomplete({ source: options });
 }
 });
 // Remove all datalists from the DOM so they do not display. $('datalist').remove();
}

显示了Safari在Safari中的显示示例示例,并使用 jQuery UI 自动完成 polyfill。

图 10.使用jQuery自动完成用户界面部件的国家 Datalist Polyfilled ( Safari )

你可能已经注意到,在默认情况下,jQuery的ui部件 MATCHES 字符在选项中任何地方都是自动完成的,而 datalists MATCH 选项仅在字符串的。 本机datalist不同,自动完成小部件允许你将这里选项定制到 MATCH 选项,然后你希望。

下面的示例演示如何在字符串的开头只生成 MATCHES 选项的自动完成功能:

<inputtype="text"id="autocomplete"><script>var options = ['Badger', 'Bat', 'Cat', 'Cheetah', 'Crocodile', 'Deer', 'Donkey',
 'Elephant', 'Fish', 'Frog', 'Giraffe', 'Gorilla'];
$('#autocomplete').autocomplete({
 // req will contain an object with a"term" property that contains the value// currently in the text input. responseFn should be invoked with the options// to display to the user. source: function (req, responseFn) {
 // Escape any RegExp meaningful characters such as".", or"^" from the// keyed term.var term = $.ui.autocomplete.escapeRegex(req.term),
 // '^' is the RegExp character to match at the beginning of the string.// 'i' tells the RegExp to do a case insensitive match. matcher = new RegExp('^' + term, 'i'),
 // Loop over the options and selects only the ones that match the RegExp. matches = $.grep(options, function (item) {
 return matcher.test(item);
 });
 // Return the matched options. responseFn(matches);
 }
});</script>

旧版本的IE

要使polyfill元素的任何在旧版本的IE 中工作,需要执行两个额外的步骤。

选项元素

第一种是 IE 版本 9和更早版本都要求选项元素是选择元素的直接子元素。 如果不是,这些版本不能识别它们,并且它们将不会被polyfill看到。

幸运的是,这很容易解决。 通过使用条件注释,你可以将选择元素放在这些 IE 版本的选项周围。 请参考以下示例:

<datalist><!--[if IE]><select><!--<![endif]--><option>Apple</option><option>Banana</option><option>Cherry</option><!-etc--><!--[if IE]><select><!--<![endif]--></datalist>

IE 版本 9和更早版本将正确检测选项。 由于条件注释从 IE 10 中移除,因此 IE 10不会受到影响。 所有其他浏览器也将忽略评论。

HTML5刀片

在 IE 版本 8和更早版本中,未知元素不能包含子元素。 因此,即使datalist元素的选项在选择元素中,它们仍然不能被识别。

幸好,这个问题也有一个很容易解决的问题。 流行的HTML5库允许不知道 IE 6 -8的元素拥有子元素。 这个刀片是在is中默认包含的;只要在配置下载时确保"html5shiv"复选框被选中。

Datalists的限制

尽管datalists非常适合向文本输入添加建议,但它们却缺少许多现代Web应用程序所需的定制功能。 例如不能使用datalists执行以下操作:

  • 使用CSS更改它的显示或者显示选项的显示。
  • 控制列表的位置。
  • 控制在浏览器向用户显示结果之前键入的字符数。
  • 控制被视为 MATCH ( 区分大小写,字符串 vs 起始处的MATCH,等等)的内容。
  • 将输入绑定到服务器端数据源。

这意味着如果你需要这些功能,你需要查看更加健壮的自动完成解决方案。 jQuery UI autocomplete部件提供了完成上述所有任务的能力。 在不需要polyfill的情况下,自动完成小部件还支持所有浏览器回到 IE 7. 有关自动完成小部件的更多信息,请查看的演示程序API文档。 ( 自动完成小部件只处理基于文本的输入,因这里它不能帮助你更专门的输入类型。

结束语

Datalists提供了一种快速的本地方式来向用户显示输入建议。 因为这些选项仅仅是建议,因这里不需要为unsupporting浏览器提供回退。

对于你希望为所有用户提供功能性datalist的情况,你可以检测支持和polyfill的功能。

虽然datalists非常适合提供建议,但它们在提供的功能方面受到限制。 如果你需要更加健壮的自动完成解决方案,ui小部件的jQuery自动完成是一个。

本文是来自 IE 团队的HTML5技术系列的一部分。 在本文中试用 3个月的免费 BrowserStack 跨浏览器 测试 @ http://modern.IE

关于作者

TJ TJ是一个网络开发者和 jQuery UI 团队成员。 他住在密歇根州,Michigan,在 jQuery,html5,CSS和其他事情上写下自己的经验,在他的博客上strike他的博客。 他是双儿的父亲,当他不在互联网上时,他通常发现他们在圈子中追踪他们。 在的博客上找到 TJ,并在 Twitter@tjvantoll 页面上找到他。


相关文章