关闭

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

标签: 自动完成 autocomplete
471人阅读 评论(0) 收藏 举报
分类:

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

附上实际效果:

大笑直接贴代码:


/*自动完成插件 @author lewdy @email 506641796@qq.com @date 2013-12-03
1.用法示例:
<input type="text" onkeyup="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!


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:22444次
    • 积分:400
    • 等级:
    • 排名:千里之外
    • 原创:17篇
    • 转载:6篇
    • 译文:0篇
    • 评论:5条
    文章分类
    最新评论