方法一：用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. [结]Oracle trigger(触发器)摘录

    1.触发器: 是许多关系数据库系统都提供的一项技术.在ORACLE系统里,触发器类似过程和函数,都有声明,执行和异常处理过程的PL/SQL块. 触发器在数据库里以独立的对象存储,它与存储过程和函数不同 ...

  2. 07socket编程

    TCP客户/服务器模型: 从图中就可以看出基本的过程来. 回射客户/服务器: 这个是回射的图示,客户端发给服务端,服务端在发回给客户端.   socket函数:   包含头文件<sys/sock ...

  3. Python基础教程【读书笔记】 - 2016/7/4

    希望通过博客园持续的更新,分享和记录Python基础知识到高级应用的点点滴滴! 第二波:第7章  更加抽象 [总览] 创建自己的对象,是Python的核心概念!Python被称为面向对象的语言.介绍如 ...

  4. CSS设置DIV背景色渐变显示

    本文转载自:http://blog.csdn.net/gingerredjade/article/details/12191741 <style type="text/css" ...

  5. Python 通过print_lol将数据保存到文件中

    1. 定义一个print_lol函数来控制列表的缩进和写入位置 import sys """this is a new fuction, which work for a ...

  6. android学习笔记21——消息提示Toast

    消息提示可细分为两种:大量消息提示——当程序有大量图片.信息需要展示时,采用对话框消息提示: 小量消息提示——当程序只有少量信息需要呈现给用户时,采用轻量级的对话框——Toast; Toast ==& ...

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

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

  8. u-boot启动流程分析(1)_平台相关部分

    转自:http://www.wowotech.net/u-boot/boot_flow_1.html 1. 前言 本文将结合u-boot的“board—>machine—>arch—> ...

  9. Env: Linux下Source Insight安装

    1.Wine安装 sudo apt-get install wine 如果有错误,可以sudo apt-get update 2.下载source insight,注意要是安装版 http://www ...

  10. oracle desc 表结构

    SQL> desc v$logfile; 名称 是否为空? 类型 ----------------------------------------- -------- ------------- ...