基于Jquery匹配输入的自动完成插件

因JqueryUI的那个autocomplete不太好用，所以自己写了一个，很好用，相应你也用得上！

附上实际效果：

直接贴代码:

/*自动完成插件 @author lewdy @email 506641796@qq.com @date 2013-12-03
1.用法示例：
<input type="text" οnkeyup="Autocomplete({obj:this, source:source, value:'id', text:'name', select:selectfun})" />

2.参数说明
obj:绑定对象
source:数据列表，如var source = [{id:2, dept:"技术部", name:"张三"},{id:2, dept:"创意部", name:"李四"}];
value:值的key
text:显示文本的key
select:选择事件
*/

/*main method*/
function Autocomplete(config){
	RemoveAutocomplete(); //remove
	var html = [];
	var source = config.source;
	var value = config.value;
	var text = config.text;
	var obj = config.obj;
	var selectfn = config.select;
	$(source).each(function(i, d){
		html.push('<li acindex="'+i+'" value="'+d[value]+'">'+d[text]+'</li>');
	});
	html = '<ul id="ldautolist">' 
		+ html.join("")
		+ '</ul>';
	$("body").append(html);


	var ul = $("#ldautolist");
	var li = ul.find("li");
	ul.css("list-style", "none");
	ul.css("border", "solid 1px #aaa");
	ul.css("position", "absolute");
	ul.css("top", obj.getBoundingClientRect().top+obj.height-10);
        ul.css("width", obj.clientWidth);
        ul.css("left", obj.getBoundingClientRect().left);
	ul.css("border-radius", "4px");
	ul.css("display", "block");
	ul.css("padding", "0");
	ul.css("background", "#FFF");
	
	li.css("list-style", "none outside none");
	li.css("display", "block");
	li.css("border-radius", "4px");
	li.css("font-size", "12px");
	li.css("padding", "3px 0 3px 3px");
	li.css("cursor", "pointer");
	li.css("width", "96%");
	li.css("margin", "0 auto");
	li.mouseover(function(){
		$(this).css("background", "#D9EDF7");
	}).mouseout(function(){
		$(this).css("background", "#FFF");
	}).click(function(){
		RemoveAutocomplete();
		var selectObj = source[$(this).attr("acindex")];
		if($(obj).val()){ //input?
			$(obj).val(selectObj[text]);
		}else{
			$(obj).attr("value", selectObj[text]);
		}
		if(selectfn != null)
			selectfn(selectObj);
	});
}

/*remove*/
function RemoveAutocomplete(){
	$("#ldautolist").remove();
}

创建一个js文件，复制以上代码，引用到页面中就可以使用了，前提是Jquery！