关于jquery的jquery.autocomplete(自动补全)插件的个人理解

1.引进js和css

 

[html]

  1. <script type=”text/javascript” src=”${ctx }/script/jquery-1.7.2.js”></script>
  2. <script type=’text/javascript’ src=’${ctx }/js/jquery.bgiframe.min.js’></script>
  3. <script type=’text/javascript’ src=’${ctx }/js/jquery.ajaxQueue.js’></script>
  4. <script type=”text/javascript” src=”${ctx }/js/jquery.autocomplete.js”></script>
  5. <script type=’text/javascript’ src=’${ctx }/js/thickbox-compressed.js’></script>
  6. <link rel=”stylesheet” type=”text/css” href=”${ctx }/js/jquery.autocomplete.css”></link>

2.好戏上场

 

 

[javascript]

  1. $(document).ready(function(){
  2.             $(‘#keyword’).autocomplete(“${ctx}/system/ajaxLoadUser.action”,  //url路径
  3.              {
  4.                 //max: 10,    //列表里的条目数
  5.                 minChars: 0,    //自动完成激活之前填入的最小字符
  6.                 width: 400,     //提示的宽度,溢出隐藏
  7.                 scrollHeight: 300,   //提示的高度,溢出显示滚动条
  8.                 matchContains: true,    //包含匹配,就是data参数里的数据,是否只要包含文本框里的数据就显示
  9.                 autoFill: false,    //自动填充
  10.                 dataType: ‘json’,   //数据类型,json ||  xml
  11.                 extraParams:{keyword:function() { return $(‘#keyword’).val();}},   //传参,后台查询的条件
  12.                 parse: function(data) {   //重写parse方法,用来解析json
  13.                     var rows = [];
  14.                     for(var i=0; i<data.length; i++){
  15.                     rows[rows.length] = {
  16.                        data:data[i],
  17.                        value:data[i].id,
  18.                        result:data[i].name
  19.                        };
  20.                      }
  21.                     return rows;
  22.                 },
  23.                 formatItem: function(row, i, max) {
  24.                     return i + ‘/’ + max + ‘:”‘ + row.name + ‘”[‘ + row.id + ‘]’;   //解释界面显示,看下图片你就明白了
  25.                 },
  26.                 formatMatch: function(row, i, max) {
  27.                     return row.name + row.id;
  28.                 },
  29.                 formatResult: function(row) {
  30.                     return row.name;
  31.                 }
  32.             }).result(function(event, row, formatted) {   //选中触发的方法
  33.                 $(“#userId”).val(row.id);
  34.                 //alert(row.id);
  35.             });

3.html代码:(给个默认的input就可以了)

 

 

[html]

  1. <input id=”keyword” />

4.我后台的json数据,提供大家参考:

 

 

[javascript]

  1. [{“id”:”1033″,”name”:”李小鹏”},{“id”:”3006″,”name”:”李小兰”},{“id”:”4012″,”name”:”李翩”},{“id”:”4022″,”name”:”李顺文”},{“id”:”5011″,”name”:”李爱红”},{“id”:”6002″,”name”:”李雅清”},{“id”:”6011″,”name”:”李俊明”},{“id”:”6012″,”name”:”李素婵”},{“id”:”6013″,”name”:”李逸珊”},{“id”:”6020″,”name”:”李婉伦”},{“id”:”7004″,”name”:”李煜林”},{“id”:”10001″,”name”:”李伟树”},{“id”:”10006″,”name”:”李振宏”},{“id”:”10007″,”name”:”李杏见”},{“id”:”12001″,”name”:”李雪峰”},{“id”:”12005″,”name”:”林李杰”},{“id”:”13006″,”name”:”李国威”}]

5.补充说明

 

(1),后台关键字乱码问题:这个是源代码问题,由于改插件默认是用GET方式提交,中文都被转义了,所以在后台必须加上编码转换才行:

keyword.getBytes(“iso8859-1″),”utf-8”)

(2),关于不兼容火狐(firefox)的问题,我就不说了,大家可以百度解决

6.补上个图片吧,有图,有真相:

这样就很直观了,呵呵

标签