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://bassistance.de/jquery-plugins/jquery-plugin-autocomplete