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

1.引进js和css

<script type="text/javascript" src="${ctx }/script/jquery-1.7.2.js"></script>
<script type='text/javascript' src='${ctx }/js/jquery.bgiframe.min.js'></script>
<script type='text/javascript' src='${ctx }/js/jquery.ajaxQueue.js'></script>
<script type="text/javascript" src="${ctx }/js/jquery.autocomplete.js"></script>
<script type='text/javascript' src='${ctx }/js/thickbox-compressed.js'></script>

<link rel="stylesheet" type="text/css" href="${ctx }/js/jquery.autocomplete.css"></link>

2.好戏上场

$(document).ready(function(){
            $('#keyword').autocomplete("${ctx}/system/ajaxLoadUser.action",  //url路径
             {
                //max: 10,    //列表里的条目数
                minChars: 0,    //自动完成激活之前填入的最小字符
                width: 400,     //提示的宽度，溢出隐藏
                scrollHeight: 300,   //提示的高度，溢出显示滚动条
                matchContains: true,    //包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示
                autoFill: false,    //自动填充
                dataType: 'json',   //数据类型,json ||  xml
                extraParams:{keyword:function() { return $('#keyword').val();}},   //传参,后台查询的条件
                parse: function(data) {   //重写parse方法,用来解析json
                	var rows = [];     
                    for(var i=0; i<data.length; i++){     
                    rows[rows.length] = {      
                       data:data[i],      
                       value:data[i].id,      
                       result:data[i].name      
                       };      
                     }     
                  	return rows;  
                },
                formatItem: function(row, i, max) {
                	return i + '/' + max + ':"' + row.name + '"[' + row.id + ']';   //解释界面显示,看下图片你就明白了
                },
                formatMatch: function(row, i, max) {
                    return row.name + row.id;
                },
                formatResult: function(row) {
                    return row.name;
                }
            }).result(function(event, row, formatted) {   //选中触发的方法
            	$("#userId").val(row.id);     
                //alert(row.id);
            });

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

<input id="keyword" />

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

[{"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.补上个图片吧,有图,有真相:

这样就很直观了,呵呵