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. 使用python拼接多张图片.二三事

    前几日在博客上看到一篇“使用python拼接多张图片”的Blog[具体是能将的图片名字必须是形如xx_1.png ... xx_100.png或者xx_001.png ... xx_100.png,拼 ...

  2. iOS--通讯录、蓝牙、内购、GameCenter、iCloud、Passbook等系统服务开发汇总

    iOS开发过程中有时候难免会使用iOS内置的一些应用软件和服务,例如QQ通讯录.微信电话本会使用iOS的通讯录,一些第三方软件会在应用内发送短信等.今天将和大家一起学习如何使用系统应用.使用系统服务: ...

  3. Pyhton 利用threading远程下发文件和远程执行linux系统命令

    #!/usr/bin/env python # encoding: utf-8 #__author__ = 'cp' #__date__ = '21/07/16 上午 10:32' import th ...

  4. Sql Server系列:多表连接查询

    连接查询是关系数据中最主要的查询,包括内连接.外连接等.通过连接运算符可以实现多个表查询.内连接查询操作列出与连接条件匹配的数据行,它使用比较运算符比较被连接列的列值.SQL Server中的内连接有 ...

  5. Visual Studio中没有为此解决方案配置选中要生成的项目

    问题: Visual Studio点击"生成解决方案"时,出现"没有为此解决方案配置选中要生成的项目". 解决方法: 菜单->生成->配置管理器-& ...

  6. 深入理解javascript函数系列第四篇——ES6函数扩展

    × 目录 [1]参数默认值 [2]rest参数 [3]扩展运算符[4]箭头函数 前面的话 ES6标准关于函数扩展部分,主要涉及以下四个方面:参数默认值.rest参数.扩展运算符和箭头函数 参数默认值 ...

  7. vc下的静态链接库与动态链接库(一)

    一.静态库与动态库的区别 目前以lib后缀的库有两种,一种为静态链接库(Static Libary,以下简称“静态库”),另一种为动态连接库(DLL,以下简称“动态库”)的导入库(Import Lib ...

  8. spring4+hibernate4+struts2项目整合的步骤及注意事项

    首先,在整合框架之前,我们需要知道Spring框架在普通Java project和Web project中是略有不同的. 这个不同地方就在于创建IOC容器实例的方式不同,在普通java工程中,可以在m ...

  9. virtual 修饰符与继承对析构函数的影响(C++)

    以前,知道了虚函数表的低效性之后,一直尽量避免使用之.所以,在最近的工程中,所有的析构函数都不是虚函数.今天趁着还书的机会到图书馆,还书之后在 TP 分类下闲逛,偶然读到一本游戏编程书,里面说建议将存 ...

  10. Kafka0.10的新特性一览

    原文链接:http://kane-xie.iteye.com/blog/2301197 2016年5月Confluent官方宣布Apache Kafka 0.10正式发布.该版本包含了很多新功能和优化 ...