自动补全插件 jquery.autocomplete

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