类似百度下拉 模拟select下拉标签

         很久前就想写一个像百度搜索引擎那样，根据录入的数据自动筛选显示结果，但一直没有时间，这几天正好项目上需要用到，就写了一个，希望能对大家有用；

代码如下，希望大家多多指正优化：

/*
@作者：lgh1117@126.com
@版本：1.0
@QQ：402600759
@MSN：lgh1117@live.cn
@Description:
	如果需要做快速提示，需要增加录入框，录入框满足一下条件：
	1、有值为suggestion的class
	2、必须为次录入框制定id值
	3、引入本js文件
	<input type="text" name="txt" id="txt1" class="suggestion" />
	4、在页面上调用：$(document).quickTip(url,para,callback); 
		url:读取数据的url，通过此url，获得的数据时含有键为id和name的json对象
		para：跟随url一起传递的参数，其中searchKey是内置的搜索键，就是在录入框录入的值对应的键
		callback：录入数据后的回调函数，函数会把当前选中项的id和name封装成object对象传递到回调函数中
	
*/

(function($){
$.fn.quickTip = function(url,para,callback){
	var dimension = function(){
		if(!this && !this.offsetLeft){
			return {x:0,y:0};
		}
		var x = this.offsetLeft;
		var y = this.offsetTop;
		var p = this.parentElement;
		while(p){
			x = x + p.offsetLeft;
			y = y + p.offsetTop;
			p = p.offsetParent;
		}
		return {x:x,y:y};
	}

	$(".suggestion").each(function(){
		var $sp = $("<span style='display:block;position:absolute;background:#f1f1f1;padding:0px 4px 0px 4px;margin:0px 1px 0px 1px;border:1px solid #afafaf;cursor:pointer;font-size:10px'>V</span>");
		var dim = dimension.call(this);
		var w = $(this).width();
		$(this).css({padding:'0px 1px 0px 19px'});
		$(this).parent().append($sp);
		var lh = $(this).height()+"px";
		var dim = dimension.call(this);
		$sp.css({'line-height':lh,top:dim.y+1,left:dim.x,'z-index':$(this).css('z-index')+1});
		//$(this).after($sp);
		var obj = this;
		$sp.click(function(){wim.apply(obj);stopBubble();});
		$(this).keyup(keyTip);
	});
	function keyTip(ev){
		if(!ev.ctrlKey && !ev.altKey && !ev.shiftKey){
			if(ev.which == 32 || ev.which == 46 || ev.which == 8 || ev.which >= 48 && ev.which <= 57 || ev.which >=65 && ev.which <= 90){
				wim.apply(this,[$(this).val()]);
			}	
		}
		
	}

	var wim = function (key){
		if(!key){
			key = "";
		}
		var $this = $(this);
		$("#tip_div").hide();
		var tableStyle = "font-size:12px;width:100%";
		var reStr = "<font style='color:red;font-weight:bold'>"+key+"</font>";
		var reg = eval("/"+key+"/g");
		if(para){
			para['searchKey'] = key;
		}
		var data = para ? para : {key:key};
		$.ajax({url:url,data:data,dataType:'json',type:'post',success:function(d,st,res){
			var str = "<table style='"+tableStyle+"' id='contentList' >";	
			var ht = 0		
			$(d).each(function(){
				if(this.name.indexOf(key) >= 0){
					ht = ht + 28;
					var v = key == "" ? this.name : this.name.replace(reg,reStr);
					str += "<tr οnmοuseοver='this.style.background=\"afafaf\"' οnmοuseοut='this.style.background=\"#efefef\"' ><td nowrap objectid='"+$this.attr("id")+"' id='"+this.id+"' style='cursor:pointer;border-bottom:1px solid #ffffff' title='"+this.name+"'>"+v+"</td></tr>";
				}
				
			});
			
			str += "</table>";
			var dim = dimension.call($this.get(0));
			dim.y = dim.y + $this.height()+6;
			$("#tip_div").html(str).css({top:dim.y,left:dim.x,'min-width':$this.width(),width:$this.width()+25}).show();		
			
			injectVal.call($("#contentList"));
		},complete:function(d,st,xhr){
			//alert(st)
		}});
	}

	var injectVal = function(){
		this.find("td").click(function(){	
			setValue(this);
		});
	}

	$(document).bind('click',function(){
		$("#tip_div").hide();
	});

	$(document).bind('keydown',function(ev){
		if(ev.which == 38 ){//up
			var curr = getCurrentTr();
			var nt;
			if(curr != null){
				$(curr).removeClass("c");
				$(curr).css("background","#efefef");
				nt = $(curr).prev();				
			}
			
			if(!nt){
				nt = $("#contentList").find("tr:last");				
			}
			if(nt && nt.length > 0){
				nt.addClass("c");
				nt.css("background","#afafaf");
				var pos = nt.get(0).offsetTop;
				setScrollTop(pos);
			}		
			
		}else if(ev.which == 40){//down
			var curr = getCurrentTr();
			var nt;
			if(curr != null){
				$(curr).removeClass("c");
				$(curr).css("background","#efefef");
				nt = $(curr).next();				
			}
			if(!nt){
				nt = $("#contentList").find("tr:first");				
			}
			if(nt && nt.length > 0){
				nt.addClass("c");
				nt.css("background","#afafaf");
				var pos = nt.get(0).offsetTop;
				setScrollTop(pos);
			}
			
		}else if(ev.which == 13){
			var c = $("#contentList").find(".c").find("td");	
			if(c.length > 0){
				setValue(c);
				stopBubble();
			}		
		}
	})

	function getCurrentTr(){
		var c = null;
		$("#contentList").find("tr").each(function(){
			var clz = $(this).attr("class");
			if(clz == 'c'){
				c = this;
				return false;
			}
		});
		return c;
	}

	createDiv();
	function createDiv(){
		var div = $("<div id='tip_div'> </div>");
		div.css({background:'#f1f1f1',position:'absolute',display:'none',height:'148px',overflow:'auto','font-size':'12px',border:'5px solid #bfbfbf',outline:'#ffff00 solid thick','z-index':9999});
		$(document.body).append(div);
	}
	function setScrollTop(pos){
		pos = pos - 10 > 0 ? pos - 10 : 0;
		$("#tip_div").animate({scrollTop:pos},100);
	}
	function stopBubble(){
		window.event.returnValue = false;
		window.event.cancelBubble = true;
	}
	function setValue(o){
		var objectid = $(o).attr("objectid");
		var val = $(o).attr("title");
		var id  = $(o).attr("id");
		$("#"+objectid).val(val);
		$("#tip_div").hide();
		if(callback){
			var o = new Object();
			o.id = id;
			o.name = val;
			callback(o);
		}
	}
}
})(jQuery)

注：转载请注明作者和出处