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

转载 2017年06月05日 16:00:48

转自: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,不支持iosAndroid,你可以在这里查看最新支持:canIUse

 


相关文章推荐

Input框的智能提示下拉层功能

下面我们来实现如图所示的功能。 第一步:首先我们先在html文件中简单的布个局如下图: 在input框下面还需要建立一个下拉框的布局,将下拉框隐藏掉 实现的静态效果是如下图所示: ...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

网页中文本框下拉选择输入与自动提示功能的实现

在网页设计中我们经常需要用户进行输入操作,下面我分享两种用户的输入功能。        1.输入框自动提示         浏览网页的时候我们经常会遇到输入框内我们输入前几个字,输入框就会出现下拉提示...

jQuery实例:输入框下拉提示,仿google suggest

转载自:http://www.cnblogs.com/woodyy/archive/2010/02/03/1662370.html jsp页面代码:     AutoC...

jQuery-input输入框下拉提示层

// JavaScript Document (function($){     $.fn.extend({         "changeTips":function(value){    ...

autocomplete 属性 清除input框输入存留历史值,防止下拉历史值显示

autocomplete 属性规定输入字段是否应该启用自动完成功能。 自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项。 ...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

用原生HTML5控件实现输入框自动提示(下拉列表)

本文介绍如何使用HTML5的输入列表属性和datalist元素,你可以轻松地设置了一个自动提示的输入框,不需要依赖jQuery或JavaScript。 实现非常简单,添加 list 属性到input...

html实现可输入下拉框

可输入的下拉框                                 请选择    csdn       123      ">write.blog.csd...
  • sdpdww
  • sdpdww
  • 2016年08月23日 14:18
  • 1095

关于javaScript实现select下拉框自动展开

我本来的目的:是想实现鼠标移动到select下拉框上,下拉框自动展开。 原先思路:使用onmouseover()鼠标事件调用一个openSelect()函数,函数中调用onclick()方法,以为就...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用原生HTML5控件实现输入框自动提示(下拉列表补全)功能
举报原因:
原因补充:

(最多只允许输入30个字)