方法一：用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. html简介

    什么是 HTML? HTML 是用来描述网页的一种语言. HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言,而是一种标记语言 (ma ...

  2. C#分析搜索引擎URL得到搜索关键字，并判断页面停留时间以及来源页面

    前台代码: var start; var end; var state; var lasturl = document.referrer; start = new Date($.ajax({ asyn ...

  3. 无法找到类：java.lang.ClassNotFoundException: com.mysql.jdbc.driver

    转载自:http://blog.csdn.net/huangbiao86/article/details/6428608 问题描述:连接数据库,而明明已经将mysql-connector-java-5 ...

  4. Session和Cookie深度剖析

    Session和Cookie的区别 具体来说cookie机制采用的是在客户端保持状态的方案,而session机制采用的是在服务器端保持状态的方案.同时我们也看到,由于采用服务器端保持状态的方案在客户端 ...

  5. override 修饰符

    override(C# 参考) 要扩展或修改继承的方法.属性.索引器或事件的抽象实现或虚实现,必须使用 override 修饰符. C# abstract class ShapesClass { ab ...

  6. iphone dev 入门实例3:Delete a Row from UITableView

    How To Delete a Row from UITableView I hope you have a better understanding about Model-View-Control ...

  7. storm概念学习及流处理与批处理的区别

    在过去10 年中,随着互联网应用的高速发展,企业积累的数据量越来越大,越来越多.随着Google MapReduce.Hadoop 等相关技术的出现,处理大规模数据变得简单起来,但是这些数据处理技术都 ...

  8. Spark RDDRelation

    package main.asiainfo.coc.sparksql import org.apache.spark.sql.SQLContext import org.apache.spark.{S ...

  9. JAVA break终止循环，与continue进入下一次循环

    一.break终止循环 在循环中,遇到break;将会跳出循环,继续往下执行代码 public class Test{ public static void main(String[] args){ ...

  10. js实现未知宽高的元素在指定元素中垂直水平居中

    js实现未知宽高的元素在指定元素中垂直水平居中:本章节介绍一下如何实现未知宽高的元素在指定元素下实现垂直水平居中效果,下面就以span元素为例子,介绍一下如何实现span元素在div中实现水平垂直居中 ...