JQuery autocomplete 使用手册

官方网站：http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete
当前版本：1.1
需要JQuery版本：1.2.6+
首先是最重要的方法
autocomplete( url or data, [options] )
第一个参数可以是数组或者url。options参数比较复杂：
* minChars (Number):
在触发autoComplete前用户至少需要输入的字符数.Default: 1，如果设为0，在输入框内双击或者删除输入框内内容时显示列表
* width (Number):
指定下拉框的宽度. Default: input元素的宽度
* max (Number):
autoComplete下拉显示项目的个数.Default: 10
* delay (Number):
击键后激活autoComplete的延迟时间(单位毫秒).Default: 远程为400 本地10
* autoFill (Boolean):
要不要在用户选择时自动将用户当前鼠标所在的值填入到input框. Default: false
* mustMatch (Booolean):
如果设置为true,autoComplete只会允许匹配的结果出现在输入框,所有当用户输入的是非法字符时将会得不到下拉框.Default: false
* matchContains (Boolean):
决定比较时是否要在字符串内部查看匹配,如ba是否与foo bar中的ba匹配.使用缓存时比较重要.不要和autofill混用.Default: false
* selectFirst (Boolean):
如果设置成true,在用户键入tab或return键时autoComplete下拉列表的第一个值将被自动选择,尽管它没被手工选中(用键盘或鼠标).当然如果用户选中某个项目,那么就用用户选中的值. Default: true
* cacheLength (Number):
缓存的长度.即对从数据库中取到的结果集要缓存多少条记录.设成1为不缓存.Default: 10
* matchSubset (Boolean):
autoComplete可不可以使用对服务器查询的缓存,如果缓存对foo的查询结果,那么如果用户输入foo就不需要再进行检索了,直接使用缓存.通常是打开这个选项以减轻服务器的负担以提高性能.只会在缓存长度大于1时有效.Default: true
* matchCase (Boolean):
比较是否开启大小写敏感开关.使用缓存时比较重要.如果你理解上一个选项,这个也就不难理解,就好比foot要不要到FOO的缓存中去找.Default: false
* multiple (Boolean):
是否允许输入多个值即多次使用autoComplete以输入多个值. Default: false
* multipleSeparator (String):
如果是多选时,用来分开各个选择的字符. Default: ","
* scroll (Boolean):
当结果集大于默认高度时是否使用卷轴显示 Default: true
* scrollHeight (Number):
自动完成提示的卷轴高度用像素大小表示 Default: 180
* formatItem (Function):
为每个要显示的项目使用高级标签.即对结果中的每一行都会调用这个函数,返回值将用LI元素包含显示在下拉列表中. Autocompleter会提供三个参数(row, i, max): 返回的结果数组, 当前处理的行数(即第几个项目,是从1开始的自然数), 当前结果数组元素的个数即项目的个数. Default: none, 表示不指定自定义的处理函数,这样下拉列表中的每一行只包含一个值.
* formatResult (Function):
和formatItem类似,但可以将将要输入到input文本框内的值进行格式化.同样有三个参数,和formatItem一样.Default: none,表示要么是只有数据,要么是使用formatItem提供的值.
* formatMatch (Function):
对每一行数据使用此函数格式化需要查询的数据格式. 返回值是给内部搜索算法使用的. 参数值row
* extraParams (Object):
为后台(一般是服务端的脚本)提供更多的参数.和通常的作法一样是使用一个键值对对象.如果传过去的值是{ bar:4 },将会被autocompleter解析成my_autocomplete_backend.php?q=foo&bar=4 (假设当前用户输入了foo). Default: {}

result(handler, item)
为选中后触发的事件。item为选中的相。
例如，我们可以在选中后直接跳转页面：


代码如下:

var data = [ {text:'Link A', url:'/page1'}, {text:'Link B', url: '/page2'} ];
$("...").autocomplete(data, {
formatItem: function(item) {
return item.text;
}
}).result(function(event, item) {
location.href = item.url;
});

文档地址：http://docs.jquery.com/Plugins/Autocomplete#API_Documentation

使用实例代码：
Jquery AutoComplete自动完成 的使用方法实例

赞 (0)

相关推荐

  • jQuery UI AutoComplete 自动完成使用小记

    jQuery UI AutoComplete 自动完成使用小记

    页面: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="web_Test" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/T

  • jQuery autocomplete插件修改

    jQuery autocomplete插件修改

    主要修改了两个地方: 一.上下选择与输入值同步问题. 输入关键字后,当出现了下拉选项,用键盘的上下键选择时,关键字输入框的值,没有与你选择的值同步.插件是老外写的,可能他没有考虑到这一点. 二.修正了在firefox下中文输入,没有激活自动提交的问题. 老外当然不会用到中文输入,这个bug存在也理所当然了. 另:附件里的实现了选择后自动提交,也就和google.百度的效果完全一样了. 下载地址

  • jQuery Autocomplete简介_动力节点Java学院整理

    jQuery UI Autocomplete是jQuery UI的自动完成组件,是我用过的最强大.最灵活的Autocomplete,它支持本地的Array/JSON数组.通过ajax请求的Array/JSON数组.JSONP.以及Function(最灵活)等方式来获取数据. 支持的数据源 jQuery UI Autocomplete主要支持字符串Array.JSON两种数据格式. 普通的Array格式没有什么特殊的,如下: ["bjpowernode","动力节点"

  • Jquery AutoComplete自动完成 的使用方法实例

    jquery-autocomplete配置: <script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="/js/jquery.autocomplete.min.js"></script> <link rel="

  • jQuery UI AutoComplete 使用说明

    介绍 在 jQuery UI 的最近更新中增加了自动完成控件 AutoComplete,这为我们提供了又一个强大的开发工具,这里介绍一下这个控件的使用方式. 首先,jQuery UI 是基于 jQuery 的,所以,必须在你的页面中首先引用 jQuery 脚本库,然后再引用 jQuery UI 库,对于 jQuery UI 库来说,可以引用整个的库,也可以仅仅引用当前页面用到的库. jQuery UI 的下载地址:http://jqueryui.com/download 一.基本配置 一般来说,

  • 基于jquery的文本框与autocomplete结合使用(asp.net+json)

    JS脚本引用 复制代码 代码如下: <script src="/scripts/Jquery.autocomplete/jquery.autocomplete.js" type="text/javascript"></script> 样式引用 复制代码 代码如下: <style type="text/css" media="all"> @import url("/scripts/J

  • jQuery.Autocomplete实现自动完成功能（详解）

    1.jquery.autocomplete参考地址 http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ http://docs.jquery.com/Plugins/Autocomplete 2.jquery.autocomplete详解 语法: autocomplete(urlor data, [options] ) 参数: url or data:数组或者url [options]:可选项,选项解释如下: 1) m

  • jQuery UI Autocomplete 体验分享

    支持的数据源 jQuery UI Autocomplete主要支持字符串Array.JSON两种数据格式. 普通的Array格式没有什么特殊的,如下: 复制代码 代码如下: ["cnblogs","博客园","囧月"] 对于JSON格式的Array,则要求有:label.value属性,如下: 复制代码 代码如下: [{label: "博客园", value: "cnblogs"}, {label: &qu

  • jQuery Autocomplete自动完成插件

    相对于同类插件,他的特色有3点. 1.可缓存查询结果 (二次查询速度快) 2.非keyup监听方式 (解决某些系统/情况下无法触发keyxxx事件的问题) 3.简洁的参数 (好看?) 插件性能尚好,我的E6500.2G内存,30秒内一共发生了4469次调用,耗时94.65毫秒:百度的是2432次调用,80.24毫秒. 接近1倍的调用是jQuery中的问题,但具体原因我还没弄明白,如果那位兄弟知道的还请不吝赐教. 调用方法 复制代码 代码如下: jQuery("#kw").suggest

  • JQuery autocomplete 使用手册

    官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete 当前版本:1.1 需要JQuery版本:1.2.6+ 首先是最重要的方法 autocomplete( url or data, [options] ) 第一个参数可以是数组或者url.options参数比较复杂: * minChars (Number): 在触发autoComplete前用户至少需要输入的字符数.Default: 1,如果设为0,在输入框内双击

  • jQuery.autocomplete 支持中文输入(firefox)修正方法

    但唯一遗憾的是,在对中文输入法打开时,firefox3.0中是对中文拼音的自动匹配,而对输入后的中文无法及时触发匹配:而在我的IE6.0下,则无此问题. 原因分析: Autocomplete插件对用户输入字符的触发自动匹配是通过"keydown"事件进行的(可分析jquery.autocomplete.js第 92行),在IE6中,当输入法打开时,输入的字符是不会触发"keydown"的,只有中文输入完毕才触发之,所以中文输入和latin文没有区别的:但在firef

  • asp.net下使用jQuery.AutoComplete完成仿淘宝商品搜索自动完成功能(改进了键盘上下选择体验)

    asp.net下使用jQuery.AutoComplete完成仿淘宝商品搜索自动完成功能(改进了键盘上下选择体验)

    首先来看一些效果图: 这个是淘宝首页的搜索效果 京东首页的搜索效果 我修改的jQuery.AutoComplete实现的效果 一.实现效果分析 我要实现的效果就是和GOOGLE类似,需要满足一下3个要求(因为这样我认为是最好的用户体验,毕竟GOOGLE做了那么久了): .首先根据关键字列出关键字相关的信息(包含统计信息) .可以使用键盘上下键选择(默认不选中第一条),文本框内容根据选择信息变换 .当选择第一或者最后一条时再向上或向下则取消选中,文本框中内容还原回原先输入的内容(这点比较重要,京东

  • 修改jQuery.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交

    但唯一遗憾的是,在对中文输入法打开时,firefox3.0中是对中文拼音的自动匹配,而对输入后的中文无法及时触发匹配:而在我的IE6.0下,则无此问题. 原因分析: Autocomplete插件对用户输入字符的触发自动匹配是通过"keydown"事件进行的(可分析jquery.autocomplete.js第 92行),在IE6中,当输入法打开时,输入的字符是不会触发"keydown"的,只有中文输入完毕才触发之,所以中文输入和latin文没有区别的:但在firef

  • jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解

    本文实例讲述了jQuery autoComplete插件两种使用方式及动态改变参数值的方法.分享给大家供大家参考,具体如下: 一.一次加载.多次使用: 前端JS代码: /*客户名称自动匹配*/ function customerAutoComplete(){ $.ajax({ type:"GET", url:encodeURI("/approvalajax/salesOrderApproval_findCustomerList"), dataType:"j

  • jquery autocomplete自动完成插件的的使用方法

    首先下载所需文件,jquery.autocomplete.js和jquery.autocomplete.css. 由于该控件获得数据可以从数组和URL两种方式获取,所以写了两个简单的小例子试验一下. 前台代码如下: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AutoComplete.aspx.cs" Inherits="AutoComple

  • jquery.AutoComplete.js中文修正版(支持firefox)

    复制代码 代码如下: jQuery.autocomplete = function(input, options) { // Create a link to self var me = this; // Create jQuery object for input element var $input = $(input).attr("autocomplete", "off"); // Apply inputClass if necessary if (optio

随机推荐