jQuery AutoComplete实现

注：该插件是在"VictorLi"所写的AutoComplete的基础上改进的，特此说明!

原文地址：http://www.oschina.net/code/snippet_102776_3656

本人平时是用的easyui开发，但恼火的是easyui没有autoComplete功能插件，虽然有一个combobox能在页面实现该功能，但是只适用于少量静态数据，不能动态查询。而jQuery UI提供了该功能，但是又不能跟easyui兼容，所以本人找到了"VictorLi"写的这个插件，但是使用后发现还是有很多地方有bug而且没有提供demo，所以自己整理了下发出来，希望对遇到该情况的朋友有点帮助

该插件使用起来很方便，几行代码即可，需要修改源码的朋友注意看注释

demo

JS部分：

$("#input_id").zhAutoComplete({url : 'test.do',format : ['NAME', 'ID'],maxLength : 6});

HTML部分：

<input type="text" id="input_id" style="width: 120px;">

 

 

 

源码：

/** * 简单实用的支持中文的自动完成插件 *  * @param url *            获得数据的URL * @param q *            查询用关键字名称 * @param boxId *            外边框ID * @param tblId *            内表格ID * @param format *            返回数据格式,默认为null,如返回JSON数据为[{id:'aaa',name:'ccccc'}] *            format:['name','id'],其中第一个项会作为text显示出来,其它项会作为afterSelect中对象属性 * @param processData *            对返回的数据进行预处理 最后 return 处理过的数据即可 * @param showList *            如何显示数据 * @param select *            选中一条记录时触发 * @param afterSelect *            选中一条记录后触发 * @param rowHeight *            行高 * @param maxLength *            最大行数 * @param zIndex *            层的zIndex属性，防止被其他层覆盖 *  * @example * $("#input_id").zhAutoComplete({url:'test.php'}); *  * @example * override actions * $("#input_id").zhAutoComplete({url:'test.php',processData:function(data}{},afterSelect: * function(td){td.id ....}); */jQuery.fn.zhAutoComplete = function(options) {var keyWordOld = null;var input = $(this);$(input).attr("autocomplete", "off");var offset = {};offset.width = $(this).width();var settings = {url : 'test.php',q : 'name',format : null,maxLength : 10,type : 'json',boxId : '_zhAC_Box',zIndex : 10,tblId : '_ZhAC_Table',offset : offset,rowHeight : 18,processData : function(data) {return data;},showList : function(data) {if ($("#" + settings.boxId).length > 0)$("#" + settings.boxId).remove();if (data.length == 0)return;var top = document.getElementById(input[0].id).getBoundingClientRect().top;var left = document.getElementById(input[0].id).getBoundingClientRect().left;var width = settings.offset.width - 1;var box = $("<div id='" + settings.boxId + "'></div>");var table = $("<table id='" + settings.tblId + "' style='font-size: 12px;font-family: \"宋体\";'></table>");if (data.length > settings.maxLength) {$(box).css({'background-color' : '#FFFFFF',position : 'absolute',border : '1px solid #817F82','z-index' : settings.zIndex,top : top + $(input).height() + 5,left : left,width : width + 1,height : settings.maxLength * settings.rowHeight,'overflow-y' : 'auto'});} else {$(box).css({'background-color' : '#FFFFFF',position : 'absolute',border : '1px solid #817F82','z-index' : settings.zIndex,top : top + $(input).height() + 5,left : left,width : width + 1});}$(table).attr("cellpadding", 2).attr("cellspacing", 0).attr("width", "100%").attr("border", 0);for (i = 0; i < data.length; i++) {var tr = $("<tr></tr>");tr.css({cursor : 'pointer','padding-top' : '2px','padding-buttom' : '2px'});if (settings.format) {var td = $("<td style='padding-left:5px;'>"+ data[i][settings.format[0]] + "</td>");for (j = 1; j < settings.format.length; j++) {$(td).attr(settings.format[j],data[i][settings.format[j]]);}} else {var td = $("<td style='padding-left:5px;'>" + data[i]+ "</td>");}$(tr).append(td);$(table).append(tr);}$(box).append(table);$("body").append(box);$("#" + settings.tblId + " tr").bind("mouseover", function() {$(this).css("background-color", "#E2EAFF")}).bind("mouseout", function() {$(this).css("background-color", "#FFFFFF")});$("#" + settings.tblId + " tr td").bind("click", function() {keyWordOld = $(this).text();});$("#" + settings.tblId + " tr td").bind("click",settings.selectParam);$(document).bind("click", function() {$(box).remove()});},selectParam : function() {$(input).val($(this).text());settings.afterSelect($(this));},afterSelect : function(td) {console.log("calling afterSelect function...");}};options = options || {};$.extend(settings, options);$(this).bind("keyup", function(event) {if (event.keyCode >= 37 && event.keyCode <= 40)return;var keyword = $.trim($(this).val());if (!keyword) {return;} else {if (keyWordOld == keyword) {return;}keyWordOld = keyword;}param = settings.q + "=" + keyword;$.get(settings.url, param, function(data) {var ds = settings.processData(data);settings.showList(ds);}, settings.type);});};