方法一：用form 表单的datalist属性，此时会以首字母补充排序。实现效果参考：http://www.w3schools.com/html/tryit.asp?filename=tryhtml_elem_datalist

<!DOCTYPE html>

<html>

<body>

<form action="action_page.php">

<input list="browsers" name="browser">

<datalist id="browsers">

<option value="Internet Explorer">

<option value="Internet2 Explorer">

<option value="Firefox">

<option value="Chrome">

<option value="Opera">

<option value="Safari">

</datalist>

<input type="submit">

</form>

<p><b>Note:</b> The datalist tag is not supported in Safari or IE9 (and earlier).</p>

</body>

</html>

HTML code

方法二：用easycomplete，下载地址http://easyautocomplete.com/。实现效果会匹配包含输入字母的所有选项

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <!-- Using jQuery with a CDN -->

    <script src="./jquery-2.1.3.min.js"></script>

    <!-- JS file -->

    <script src="./jquery.easy-autocomplete.min.js"></script>

    <!-- CSS file -->

    <link rel="stylesheet" href="./easy-autocomplete.min.css">

    <!-- Additional CSS Themes file - not required-->

    <!--<link rel="stylesheet" href="./easy-autocomplete.themes.min.css">-->

    <script>

        $(document).ready(function () {

            var options = {

                data: ["blue", "green", "pink", "red", "yellow"]

            };

            $("#basics").easyAutocomplete(options);

        })

    </script>

</head>

<body>

<input id="basics"/>

</body>

</html>

下拉列表autocomplete各种实现方式比较的更多相关文章

  1. 在Winform开发中，我们使用的几种下拉列表展示字典数据的方式

    在Winform开发中中,我们为了方便客户选择,往往使用系统的字典数据选择,毕竟选择总比输入来的快捷.统一,一般我们都会简单封装一下,以便方便对控件的字典值进行展示处理,本篇随笔介绍DevExpres ...

  2. 基于MVC4+EasyUI的Web开发框架经验总结（6）--在页面中应用下拉列表的处理

    在很多Web界面中,我们都可以看到很多下拉列表的元素,有些是固定的,有些是动态的:有些是字典内容,有些是其他表里面的名称字段:有时候引用的是外键ID,有时候引用的是名称文本内容:正确快速使用下拉列表的 ...

  3. jquery 下拉列表选择值

    选择下拉列表值样例方式 $("#updateAppName").get(0).selectedIndex = 0; $("#updateAppName").ge ...

  4. NPOI 添加下拉列表

    需求 给指定列添加下拉列表.如下图: 思路 NPOI的文档网站不能访问了,这里参考的POI文档. 加下拉列表有两种方式,一种直接写字符串,例如 new String[]{"10", ...

  5. （转）基于MVC4+EasyUI的Web开发框架经验总结（6）--在页面中应用下拉列表的处理

    http://www.cnblogs.com/wuhuacong/p/3840321.html 在很多Web界面中,我们都可以看到很多下拉列表的元素,有些是固定的,有些是动态的:有些是字典内容,有些是 ...

  6. HTML与CSS

    HTML中DTD是什么?是一套关于标记符的语法规则.DTD是一种保证html格式正确最有效的方法.一个DTD文档包含:元素的定义规则,元素间关系的定义规则,元素可使用的属性,可使用的实体或符号规则. ...

  7. 怎么用ABBYY创建属于自己的PDF

    怎么创建一份属于自己的PDF文档呢?由于PDF格式文件具有跨平台.支持超长文件.安全可靠性高等诸多优势,在日常办公学习中应用越来越广泛.而随着技术的发展,各种办公软件也对PDF提供越来越多的支持,但P ...

  8. QTP实践总结

    QTP实践总结 查询数据库修改freq 1.Testcasetable创建查询select * from testcasetable order by fseq desc 2.设计表-选项-修改自动递 ...

  9. 详解Ajax请求（四）——多个异步请求的执行顺序

    首先提出一个问题:点击页面上一个按钮发送两个ajax请求,其中一个请求会不会等待另一个请求执行完毕之后再执行? 答案是:不会,这两个异步请求会同时发送,至于执行的快与慢,要看响应的数据量的大小及后台逻 ...

随机推荐

  1. [转]java生成随机数字和字母组合

    摘自 http://blog.csdn.net/xiayaxin/article/details/5355851 import java.util.Random; public String getC ...

  2. LintCode "Heapify"

    My first try was, using partial sort to figure out numbers layer by layer in the heap.. it only fail ...

  3. 【转】IntelliJ IDEA内存优化最佳实践

    [编者按]本文作者在和同事的一次讨论中发现,对 IntelliJ IDEA 内存采用不同的设置方案,会对 IDE 的速度和响应能力产生不同的影响. Don't be a Scrooge and giv ...

  4. Hadoop：使用原生python编写MapReduce

    功能实现 功能:统计文本文件中所有单词出现的频率功能. 下面是要统计的文本文件 [/root/hadooptest/input.txt] foo foo quux labs foo bar quux ...

  5. android学习笔记29——Intent/IntentFilter

    Intent/IntentFilter Intent封装android应用程序需要启动某个组件的“意图”,Intent还是应用程序组件之间通信的重要媒介. EG:Activity之间需要交换数据时,使 ...

  6. node.js的作用、回调、同步异步代码、事件循环

    http://www.nodeclass.com/articles/39274 一.node.js的作用 I/O的意义,(I/O是输入/输出的简写,如:键盘敲入文本,输入,屏幕上看到文本显示输出.鼠标 ...

  7. strong标签与b标签的区别

    关于html标签中b和strong两个的区别. 用在网页上,默认情况下它们起的均是加粗字体的作用,二者所不同的是,<b>标签是一个实体标签,它所包围的字符将被设为bold(粗体),而< ...

  8. 互联网 DBA 需要做那些事(转)

    众所周知,互联网DBA与传统行业DBA有很大的不同,那就是管理的机器多,新技术更新快,面对的开发多.网络环境复杂.要求7*24待机:这样就 导致互联网DBA的工作在传统DBA工作之上,增加了更多的复杂 ...

  9. sublime3的licence(update 2016-04-14)

    —– BEGIN LICENSE —–Michael BarnesSingle User LicenseEA7E-8213858A353C41 872A0D5C DF9B2950 AFF6F667C4 ...

  10. JAVA 数组实例-求学生平均成绩，与计算数组的长度

    实例: 知识点:数组名.length是计算数组的长度 import java.util.*; //求学生平均分成绩 public class Test{ public static void main ...