Home > Article > Web Front-end > html5 datalist标签使用示例(自动完成组件)

html5 datalist标签使用示例(自动完成组件)

PHP中文网Original: 2017-03-27 16:57:002558browse

以前需要用JS写一个自动完成组件（Suggest），很费劲。HTML5时代则不用了，直接使用datalist标签，直接减少了工作量。如下

<!DOCTYPE html>
<html>
 <head>
    <title>HTML5 datalist tag</title>
    <meta charset="utf-8">
 </head>
    <p>
        浏览器版本：<input list="words">
    </p>
    <datalist id="words">
        <option value="Internet Explorer">
        <option value="Firefox">
        <option value="Chrome">
        <option value="Opera">
        <option value="Safari">
        <option value="Sogou">
        <option value="Maxthon">
    </datalist>
 </body>
</html>

datalist提供一个事先定义好的列表，通过id与input关联，当在input内输入时就会有自动完成（autocomplete）的功能，用户将会看见一个下拉列表供其选择。

Chrome/Firefox/Opera和IE10+均已支持，Safari直到版本7仍然不支持。

HTML5每日一练之datalist标签自动补全的使用

datalist标签

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：HTML5的download属性详细介绍和使用实例_html5教程技巧Next article：HTML5 Canvas锯齿图代码实例_html5教程技巧

See more

html5 datalist标签使用示例(自动完成组件)

Related articles