关于jquery的jquery.autocomplete(自动补全)插件的个人理解
1.引进js和css
[html]
- <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.好戏上场
[javascript]
- $(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就可以了)
[html]
- <input id=”keyword” />
4.我后台的json数据,提供大家参考:
[javascript]
- [{“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.补上个图片吧,有图,有真相:
这样就很直观了,呵呵
