使用HTML5数据列表为任何网站创建Autosuggest功能

Everyone who uses the web is familiar with the delivery of “autosuggest”, from Google’s initial offering (now replaced by the Instant Search algorithm) to infinitely varied interfaces on sites and mobile devices.

使用网络的每个人都熟悉“自动建议”的交付，从Google的最初产品(现已由Instant Search算法取代)到站点和移动设备上无穷无尽的界面。

The purpose behind every instantiation of autosuggest is always the same: to anticipate and guide the user. No-one wants to spend time laboriously typing in an entire product or place name into a text box: if programming can accurately predict what a user intends to write from a few keystrokes, so much the better.

autosuggest的每个实例化背后的目的始终是相同的：预见并指导用户。 没有人愿意花时间费力地在文本框中输入整个产品或地名：如果编程可以通过几次按键就能准确地预测用户打算写的内容，那就更好了。

Traditionally this has been achieved through the use of JavaScript, sometimes with AJAX: JQuery UI has an autocomplete function, for example. But as with many things, HTML5 is building that capability natively into the browser, in this case via the datalist element.

传统上，这是通过使用JavaScript来实现的，有时使用AJAX来实现：例如，JQuery UI具有自动完成功能 。 但是与许多事情一样，HTML5本身就是通过datalist元素在浏览器中构建该功能的。

The creation of a datalist is simplicity itself. In this example, I’ll use a portion of code from the site I created over the holiday season, tipster.io, which dynamically suggests country names as the user types into a search field:

datalist的创建本身就是简单性。 在此示例中，我将使用假日期间创建的网站中的一部分代码tipster.io ，当用户在搜索字段中输入内容时 ，该代码会动态建议国家/地区名称：

<form>
	<label for="country">Enter a country:</label>
	<input type="search" maxlength="20" size="22" autocomplete="off" spellcheck name="country" id="country" list="countries" placeholder="Japan">
	<datalist id="countries">
		<option value="Albania">
		<option value="Argentina">
		<option value="Australia">
		<option value="Austria">
	…
	</datalist>
	<input type="submit" value="Go">
</form>

Technically, a datalist could be connected to any type of text input: all that’s required is that you pair the list attribute on the input element with the value of the id for the corresponding datalist. In the example above I’ve turned off autocomplete so that a user’s browser won’t attempt to fill the field with its own guesses at the text, and turned on spellcheck so that misspelled country names will be pointed out to the user.

从技术上讲， datalist可以连接到任何类型的文本输入：所需要做的就是将input元素上的list属性与相应datalist的id值配对。 在上面的示例中，我关闭了autocomplete以使用户的浏览器不会尝试使用自己对文本的猜测来填充该字段，并打开了spellcheck以便向用户指出拼写错误的国家/地区名称。

You can try the example at the top of this article, or play with the more fully-featured version at tipster.io. There are a few important points to note before deciding to use datalist in your own site:

您可以尝试本文顶部的示例，也可以在tipster.io上使用功能更全的版本。 在决定在自己的网站中使用datalist之前，需要注意以下几点：

• While support for datalist in desktop browsers is good, mobile devices do not support the element yet. This is probably due to the consideration software engineers are giving to balance a site’s use of autosuggest with the mobile space’s OS-specific use of the same feature.

  虽然桌面浏览器对datalist支持很好，但移动设备尚不支持该元素。 这可能是由于软件工程师考虑平衡站点对自动提示的使用与移动空间对OS的相同功能的使用之间的平衡所致。

• If the client does not support the datalist or search tags, the input will fall back to being a standard text interface. In that case, you could use a JavaScript polyfill, possibly combined with Modernizr for feature detection, to provide an equivalent interface. A few examples: Chris Coiyer’s Relevant Dropdrowns, and this one.

  如果客户端不支持datalist或search标签，则输入将退回到标准文本界面。 在这种情况下，您可以使用JavaScript polyfill(可能与Modernizr结合使用以进行特征检测)来提供等效的接口。 以下是一些示例：克里斯·科耶尔(Chris Coiyer)的相关Dropdrowns ，以及该示例。

• As with the search element, datalist does not magically “make search happen” on a website. You will have to put in the time and code into building search features.

  与search元素一样， datalist也无法在网站上神奇地“使搜索发生”。 您将需要花费时间和代码来构建搜索功能。

• datalist does not respond to common spelling mistakes or incorrect letter combinations in its suggestions. Instead, your backend code should route around anticipated errors.

  datalist在其建议中不响应常见的拼写错误或不正确的字母组合。 相反，您的后端代码应绕过预期的错误。

• The element is best used as pure HTML5 when the possible solution space is small, known, and unchanging: a country list is a good example. If the number of possible terms is high or changes frequently, you’ll need to fall back to an AJAX-like approach that alters the datalist content dynamically.

  当可能的解决方案空间很小，已知且不变时，该元素最好用作纯HTML5：国家/地区列表就是一个很好的例子。 如果可能的术语数量很多或经常更改，则需要使用类似于AJAX的方法来动态更改datalist内容。

• datalist should increasingly be considered as a very effective alternate to the traditional <select> element: rather than opening up and scrolling through a long list of options, datalist can be used to dynamically deliver a limited range of possibilities to the user.

  datalist应越来越多地被认为是传统<select>元素的一种非常有效的替代方法： datalist列表无需打开并滚动一长串选项，而是可以用来向用户动态地提供有限范围的可能性。

翻译自: https://thenewcode.com/638/Create-An-Autosuggest-Feature-For-Any-Web-Site-Using-HTML5-datalist