HTML5每日一练之datalist标签自动补全的使用-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

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

PHP中文网

May 14, 2018 am 11:36 AM

注：在其它的一些教程或资料中datalist标签称为下拉列表，我认为这种叫法不够准确，而且不能一下子理解此标签。比如前段时间：“一个朋友问我datalist是不是一种能自定义样式的select？”，后来才知道，有些书籍或教程中称为下拉列表而导致初学者理解错。那么此标签怎么称呼它才合适呢？咱们看完下面的案例后，我再说明：
datalist标签：
datalist介绍：
datalist一般不会独行江湖，它需要与input标签的搭配使用，就像label标签与input标签搭配使用一样。既然与input标签搭配使用，那么这两个标签之间必定存在着“特殊的关系”，不然input与datalist就互不相认了，那么如何才能让他们建立起来这种关系呢？这个时候我们需要一个新的属性list（注意，不是for），list与for的用法一样，list的值设置为表单元素的 id，这样他们便会自动关联了。
Chrome对此标签支持不好，Firefox和Opera可很好的支持
datalist作用：
我们经常在网上的搜索框中看到当输入一个字符，输入框下方会自动列出你输入的关键词，比如Google或百度的搜索，如下图：

此效果非HTML5的datalist技术实现

datalist案例：

<input list="w3cfuns-search" />
<datalist id="w3cfuns-search">
        <option value="W3Cfuns">
        <option value="W3C标准">
        <option value="W3C规则">
        <option value="W3C验证">
        <option value="前端开发">
        <option value="前端开发网">
        <option value="2天驾驭DIV+CSS">
        <option value="W3CSchool">
</datalist>

Copy after login

datalist说明：
个人认为称呼datalist为自动补全列表更加合适，因为它并不是下拉列表。

以上就是HTML5每日一练之datalist标签自动补全的使用的内容，更多相关内容请关注PHP中文网（www.php.cn）！

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

datalist标签

Statement of this Website

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