jQuery 插件autocomplete
适合场景：
项目中有时会用到自动补全查询，就像Google搜索框、淘宝商品搜索功能，输入汉字或字母，则以该汉字或字母开头的相关条目会显示出来供用户选择，autocomplete插件就是完成这样的功能，即实用，又不花哨。最大的好处是免费。
下载地址： http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete
支持jquery版本：jQuery 1.2.6 以上。
使用指南：
1. 需要导入的js文件有2个：
<script type="text/javascript"src="jquery-1.3.2.min.js"> </script>
<script type="text/javascript"src="jquery.autocomplete.js"></script>
2. 定义一个文件输入框：
<input type="text" name="query" id="query" /> 3 jquery.autocomplete API 语法： autocomplete(url/data, [options] ) 参数： url / data：url或者数组3.第一种直接使用数据：
$("# query ").autocomplete(datas,{ minChars: 0,//自动完成激活之前填入的最小字符 max:12,//列表条目数 width: 400,//提示的宽度 scrollHeight: 300,//提示的高度 matchContains: true,//是否只要包含文本框里的就可以 autoFill:false,//自动填充 });Datas 是后台返回的json数据串。
形如：var emails = [ { name: "Peter Pan", to: "peter@pan.de" }, { name: "Molly", to: "molly@yahoo.com" }, { name: "Forneria Marconi", to: "live@japan.jp" }, { name: "Master <em>Sync</em>", to: "205bw@samsung.com" }, { name: "Dr. <strong>Tech</strong> de Log", to: "g15@logitech.com" }, { name: "Don Corleone", to: "don@vegas.com" }, { name: "Mc Chick", to: "info@donalds.org" }, { name: "Donnie Darko", to: "dd@timeshift.info" }, { name: "Quake The Net", to: "webmaster@quakenet.org" }, { name: "Dr. Write", to: "write@writable.com" } ];
或者数组格式的：
["Aberdeen", "Ada", "Beaverdam", "Bedford","Cuyahoga Falls", "Dayton", "De Graff", "Fairfield", "Fairpoint", "Groveport", "Grover Hill","Hamden", "Hamersville", "Irondale", "Jacksontown","Kirby"]; 第二种动态使用：$("#staffCode").autocomplete("baseinfo/autocomplete.action",{
minChars: 1, //最小显示条数
max: 15, //最大显示条数
//scroll: true,//最多可以显示150个结果
autoFill: false,
dataType : "json", //指定数据类型的渲染方式
extraParams:{
staffCode:function(){
return$("#staffCode").val();//url的参数传递
}
},
parse: function(data){
var rows = [];
var d = data;
for(var i=0; i<d.length;i++){
rows[rows.length] = {
data:d[i],
value:d[i],
result:d[i].staffCode
};
}
return rows;
},
formatItem: function(row,i,n){
returnrow.staffCode+""+row.staffStaffName;
}
}).result (function(event, data,formatted) {
$("#staffId").val(data.staffPid);
$("#staffStaffName").val(data.staffStaffName);
}); 参数方法说明：minChars: 0, //至少输入的字符数，default：1；如果设为0，在输入框内双击或者删除内容时显示列表。
width:220, //下拉框的宽度，default：input元素的宽度
max: 10, //下拉项目的个数，default：10
scrollHeight:300, // 下拉框的高度，Default: 180
scroll:true, //当结果集大于默认高度时，是否使用滚动条，Default:true
multiple:false, //是否允许输入多个值. Default: false
autoFill:false, // 是否自动填充. Default:false
multipleSeparator:" ",//输入多个字符时,用来分开各个的字符. Default: ","
matchCase:false, //是否开启大小写敏感
selectFirst:true, // 如果设置成true,下拉列表的第一个值将被自动选择, Default: true
matchSubset:true, //是否启用缓存
cacheLength: 10, //缓存的长度.即缓存多少条记录.设成1为不缓存.Default: 10
delay: 20, //击键后的延迟时间(单位毫秒).Default:远程为400 本地10
mustMatch:false, //如果设置为true,只会允许匹配的结果出现在输入框,当用户输入的是非法字符时,
//Default: false
matchContains:true, //决定比较时是否要在字符串内部查看匹配.Default: false
formatItem: function(row,i, max) { }
//结果中的每一行都会调用这个函数,返回值将用LI元素包含,显示在下拉列表中. 三个参数(row, i, max): 返回的结果数组, 当前处理的行数(从1开始), 当前结果数组元素的个数. Default: none, 表示不指定自定义的处理函数.
formatResult :function(row, i, max) { }
//和formatItem类似,但可以将将要输入到input文本框内的值进行格式化.同样有三个参数,和formatItem一样.Default:none,表示要么是只有数据,要么是使用formatItem提供的值.
formatMatch:function(row) { }
//对每一行数据使用此函数格式化需要查询的数据格式. 返回值是给内部搜索算法使用的. 参数值row
result (function(event,data, formatted){}) //此事件会在用户选中某一项后触发，参数为：event: 事件对象, data: 选中的数据行,formatted:formatResult函数返回的值;
例如：$("#d").result(function(event, data, formatted)
{
alert(formatted);
})
extraParams (Object):
//为后台(一般是服务端的脚本)提供更多的参数.和通常的作法一样是使用一个键值对对象.如果传过去的值是{ bar:4 },将会被autocompleter解析成my_autocomplete_backend.php?q=foo&bar=4 (假设当前用户输入了foo). Default: {}
参考文档：1.http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/
2 http://www.cnblogs.com/dongqi/archive/2010/04/06/1705510.html
3.http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete
