jQuery.AutoComplete是一个基于jQuery的自动补全插件。借助于jQuery优秀的跨浏览器特性,可以兼容Chrome/IE/Firefox/Opera/Safari等多种浏览器。

特性一览:

  • 支持补全列表的宽度设定。
  • 支持补全列表的最大高度设定。
  • 支持补全列表的行数限制。
  • 支持补全列表的显示位置及方向的设定。
  • 支持自定义匹配规则。
  • 支持匹配文本的渲染。
  • 支持自定义匹配文本的渲染样式。
  • 支持补全列表的样式设定。
  • 支持自定义补全列表项的创建。
  • 支持多种数据源。
  • 支持'json'和'xml'两种数据格式。
  • 支持异步处理。
  • 支持错误调试。
  • 支持jQuery1.7.1+。

  • github

在线实例

实例预览 自动补全基本实例

实例预览 自动补全功能实例

参考手册 jQuery.AutoComplete API文档

引入文件

  1. <script type="text/javascript" src="jquery1.8.3.min.js"></script>
  2. <link rel="stylesheet" type="text/css" href="jquery.autocomplete.css">
  3. <script type="text/javascript" src="jquery.autocomplete.min.js"></script>
复制

使用方法

  1. <input type="text" id="down" value="e"></input>
复制
  1. $('#down').AutoComplete({
  2. 'data': ['One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine', 'Ten', 'Eleven', 'Twelve'],
  3. 'itemHeight': 20,
  4. 'width': 280
  5. }).AutoComplete('show');
复制

jQuery AutoComplete 自动补全的更多相关文章

  1. jquery.autocomplete自动补全功能

    项目实例: 一:js //SupplierAutoComplete.js $().ready(function () { $("#txtSupplier").autocomplet ...

  2. Bootstrap Typeahead/Jquery autocomplete自动补全

    使用Bootstrap Typeahead 组件: Bootstrap 中的 Typeahead 组件就是通常所说的自动完成 AutoComplete,自动填充. 效果如图所示: 实现方式: 1.引入 ...

  3. jquery autocomplete自动补全

    简单用法: $(function(){ var data = "the People's Republic of China".split(" "); $(&q ...

  4. Autocomplete 自动补全(Webform实战篇)

    开篇语 因为项目中需要用到一个自动补全的功能,功能描述: 需求一:新增收件人的时候,自动下拉显示出数据库中所有的收件人信息(显示的信息包括:姓名-收件地址-联系方式) 需求二:选中一个值得时候,分别赋 ...

  5. jquery实现自动补全邮箱地址

    开始做的邮箱补全代码 //检查email邮箱 function isEmail(str) { if (str.indexOf("@") > 0) { return true; ...

  6. Pig autocomplete 自动补全

    在pig的grunt环境下,按TAB键可以自动补全命令,用户可以添加自己的补全信息. 在conf目录下创建autocomplete文件,添加如下内容: hdfs://vm1:8020/   在grun ...

  7. jquery.autocomplete自动补齐和自定义格式

    1.简单的下拉自动补齐,可以使用本地或远程数据源 <input name="autoTag" id="autoTag" /> var source ...

  8. jQuery邮箱自动补全代码

    JScript 代码   复制 (function($){ $.fn.emailMatch= function(settings){ var defaultSettings = { emailTip: ...

  9. autocomplete实现联想输入,自动补全

    jQuery.AutoComplete是一个基于jQuery的自动补全插件.借助于jQuery优秀的跨浏览器特性,可以兼容Chrome/IE/Firefox/Opera/Safari等多种浏览器. 特 ...

随机推荐

  1. PHP的静态和接口

    静态普通成员普通成员属于对象//静态成员//静态成员属于类//static 关键字 变成静态成员/*class ren {    public $name;    public static $zho ...

  2. angular.js:13920 Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- testServe

    angular.js:13920 Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- testSer ...

  3. uwp 图片切换动画 使用帧动画

    上一篇博客使用了Timer来实现图片的切换,@lindexi_gd讨论了一下性能,我本人其实对性能这一方面不太熟,但我觉得还是有必要考虑一下,那么今天我们使用帧动画开实现以下 新建项目,添加一个But ...

  4. QUOTED_IDENTIFIER 选项对 index 的影响

    在修改或创建Index时,有时会收到一些Error Message,指明Set options设置错误,最常见的选项是:SET QUOTED_IDENTIFIER 选项 当创建或修改的index包含c ...

  5. codeforces C. Vanya and Scales

    C. Vanya and Scales Vanya has a scales for weighing loads and weights of masses w0, w1, w2, ..., w10 ...

  6. 一起学微软Power BI系列-官方文档-入门指南(5)探索数据奥秘

    我们几篇系列文章中,我们介绍了官方入门文档与获取数据等基本知识.今天继续给大家另外一个重点,探索数据奥秘.有了数据源,有了模型,下一步就是如何解析数据了.解析数据的过程需要很多综合技能,不仅仅是需要掌 ...

  7. 为什么要学习Linux

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 本篇修改自我在知乎上回答的问题,为什么要学习 Linux? 我最开始用Linux是 ...

  8. Android仿qq聊天记录长按删除功能效果

    最近项目在做IM即时通讯开发,在删除聊天列表的时候跟删除聊天详细信息的时候,产品经理想要跟ios一样,在当前选中行上方弹出一个删除窗口.于是先从网上找demo,找了一个发现是Dialog做的,我感觉没 ...

  9. 4、解析配置文件 redis.conf、Redis持久化RDB、Redis的主从复制

    1.Units单位 配置大小单位,开头定义了一些基本的度量单位,只支持bytes,不支持bit 对大小写不敏感 2.INCLUDES包含 和我们的Struts2配置文件类似,可以通过includes包 ...

  10. 好玩的SQL

    1. 做一个3*3的加法表 SQL), (); A||'+'||B||'='||(A+B) ------------------------------------------------------ ...