用原生HTML5控件实现输入框自动提示（下拉列表补全）功能

最新推荐文章于 2024-07-12 08:49:54 发布

John的WEB前端学习日记

最新推荐文章于 2024-07-12 08:49:54 发布

阅读量2.6w

点赞数 5

分类专栏： HTML5

HTML5 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

转自：http://www.cnblogs.com/Chen-XiaoJun/articles/5839335.html

元素介绍

想象一下我们想要用户输入一个字符串，例如他们的名字，我们可能会用到<input type="text"/>元素，这样子用户就可以随意的输入他们的内容。想象一下假如我们需要用户输入的是他们的国家居住地，我们更喜欢使用<select>元素，这个将会限制可选的结果（有时候也许是好的），并且还存在着一个潜在的巨大用户选择。

但如果我们想要用户自由输入的同时又有一些建议选项，这里就是<datalist>的用处了。

示例代码

datalist包含<option>元素，类似于<select>元素，然而<datalist>并不是独立控制，相反它是附加在<input type="text"/>上的list，类似于下面的这段代码：

<body>
    <label>Select your preferred code editor:</label> 
    <input type="text" id="txt_ide" list="ide" /> 
    <datalist id="ide"> 
        <option value="Brackets" /> 
        <option value="Coda" /> 
        <option value="Dreamweaver" /> 
        <option value="Espresso" /> 
        <option value="jEdit" /> 
        <option value="Komodo Edit" /> 
        <option value="Notepad++" /> 
        <option value="Sublime Text 2" /> 
        <option value="Taco HTML Edit" /> 
        <option value="Textmate" /> 
        <option value="Text Pad" /> 
        <option value="TextWrangler" /> 
        <option value="Visual Studio" /> 
        <option value="VIM" /> 
        <option value="XCode" /> 
    </datalist>
</body>

这段代码里面使用到了<input type="text"/>控制着一个list的新属性，这是告诉浏览器加载一个id为上面list的值的这个列表值或者来自datalist的建议。

根据官方W3C的文档，datalist还可以用于下面这些

- <input type="text" />
- <input type="url" />
- <input type="tel" />
- <input type="color" />
- Data & Time (including Month etc.), Range and more.

更多的属性

我们还可以给它的option添加一个label属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <label>Select your preferred code editor:</label> 
    <input type="text" id="txt_ide" list="ide" /> 
    <datalist id="ide"> 
        <option value="Brackets" /> 
        <option value="Coda" /> 
        <option value="Dreamweaver" /> 
        <option value="Espresso" /> 
        <option value="jEdit" /> 
        <option value="Komodo Edit" /> 
        <option value="Notepad++" /> 
        <option value="Sublime Text 2" label="the develpoer's choice" /> 
        <option value="Taco HTML Edit" /> 
        <option value="Textmate" /> 
        <option value="Text Pad" /> 
        <option value="TextWrangler" /> 
        <option value="Visual Studio" /> 
        <option value="VIM" /> 
        <option value="XCode" /> 
    </datalist>
</body>
</html>

兼容性

支持最新IE10、Firefox、Chrome和Opera，不支持ios和Android，你可以在这里查看最新支持：canIUse

John的WEB前端学习日记

关注

5
点赞
踩
15

收藏

觉得还不错? 一键收藏
1
评论
用原生HTML5控件实现输入框自动提示（下拉列表补全）功能

转自：http://www.cnblogs.com/Chen-XiaoJun/articles/5839335.html元素介绍想象一下我们想要用户输入一个字符串，例如他们的名字，我们可能会用到元素，这样子用户就可以随意的输入他们的内容。想象一下假如我们需要用户输入的是他们的国家居住地，我们更喜欢使用元素，这个将会限制可选的结果（有时候也许是好的），并且还存在着一个潜在的巨大用户选
复制链接

扫一扫

专栏目录