方法一：用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. jsoncpp用法通俗易懂之将数据合成json格式

    void *upload(void *pParam) { CUpSender *s = (CUpSender*)pParam; map<string, string> mx; char t ...

  2. sphinx 配置实例

    配置实例 3.1.数据源. 这里我们采用 mysql的数据源.具体情况如下: Mysql server:192.168.1.10 Mysql db :test Mysql 表:test.sphinx_ ...

  3. 批处理安装APK

    set adbpa=D:\Nexus6\ota51\ADBTool set apkpa=D:\WDJDownload\Apps %adbpa%\adb.exe install %apkpa%\CPU- ...

  4. Redis启动警告错误解决

    启动错误 (1)WARNING: The TCP backlog setting of 511 cannot be enforced because /proc/sys/net/core/somaxc ...

  5. Python标准库

    Python标准库是随Python附带安装的,它包含大量极其有用的模块.熟悉Python标准库是十分重要的,因为如果你熟悉这些库中的模块,那么你的大多数问题都可以简单快捷地使用它们来解决. sys模块 ...

  6. SchemaExport的使用

    @Test public void testCreateDB(){ Configuration cfg = new Configuration().configure(); SchemaExport ...

  7. PLSQL_基础系列02_分组函数GROUP BY / ROLLUP / CUBE（案例）

    2014-11-30 Created By BaoXinjian

  8. IGS_学习笔记03_Integrated SOA Gateway设定配置（案例）

    20150506 Created By BaoXinjian

  9. HTML5表单与PHP交互

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  10. sax,Dom,等解析方式地址 ？

    Android中使用SAX对XMl文件进行解析 http://blog.csdn.net/developer_jiangqq/article/details/7197045 使用SAX技术对XML文档 ...