方法一：用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. <<编写可维护的JavaScript>>之避免使用全局变量

    一.避免全局变量的理由 js中避免创建全局变量一是避免命名冲突,二是避免因为创建全局变量让代码变得脆弱,三是创建全局变量会让代码难以测试. 二.避免创建全局变量的几种方法 //避免全局变量 避免命名冲 ...

  2. HackerRank "Kundu and Tree" !!

    Learnt from here: http://www.cnblogs.com/lautsie/p/3798165.html Idea is: we union all pure black edg ...

  3. SPOJ #440. The Turtle´s Shortest Path

    Coding a Dijkstra is not hard. %70 of my time spent on tackling TLE, as my last post. Dijkstra works ...

  4. Redis集群方案介绍

    由于Redis出众的性能,其在众多的移动互联网企业中得到广泛的应用.Redis在3.0版本前只支持单实例模式,虽然现在的服务器内存可以到100GB.200GB的规模,但是单实例模式限制了Redis没法 ...

  5. oracle学习笔记（二）设置归档模式

    设置归档模式(mount状态) ALTER database ARCHIVELOG; //关闭数据库 shutdown immediate //启动数据库到mount状态 startup mount ...

  6. Sublime text2用户自定义配置

    [{ "keys": ["ctrl+d"], "command": "run_macro_file", "ar ...

  7. Navicat(连接) -1高级设置

    高级设置 设置位置当创建一个新的连接,Navicat 将在设置位置创建一个子文件夹.大多数文件都保存在该子文件夹: Navicat 对象 服务器类型 扩展名 查询 全部 .sql 导出查询结果设置文件 ...

  8. HTTP头域列表与解释 之 request篇

    HTTP 头域是HTTP协议中请求(request)和响应(response)中的头部信息,其实就是HTTP通信的操作参数,告诉web服务器和浏览器怎样处理这个通信.HTTP头从一个请求信息或者响应信 ...

  9. JAVA使用HBASE常用方法

    package HBaseTest; /** * Created by root on 11/11/22. */ import java.io.IOException; import org.apac ...

  10. DBA_Oracle Archive Log的基本应用和启用（概念）

    2014-11-15 Created By BaoXinjian