jquery实现点击input弹出下拉框

html:

<input type="text" class="salesInfo" id="customerName"/>
<ul class="on_changes">
<!-- <li onclick="get('4df5','sdf')">sdf</li> -->
</ul>

css:

.on_changes{width:232px; position:absolute; top:61px; list-style:none; background:#FFF; border:1px solid #000; display:none; padding:3px;}
.on_changes li{margin:0px;padding:6px;font-size: 14px;}
.on_changes li.active{ background:#CEE7FF;}

js:

    $("#customerName").click(getConfirm);

		function getConfirm(){
			
			// 删除,保证每次都是最新的数据
			$(".on_changes li").remove();
			
			// 加载客户数据
			$.ajax({
			  	url:'public/getConfirm',
				type:'GET',
				data:"id="+"${userId}",
				success:function(data){
					//alert(data);
					var arr = ""+data+"";
				    var dataObj = eval("("+arr+")");
				    
				     $.each(dataObj.rows,function(idx,item){
					     //组装数据
					  	 //alert(item);
				  	 	 var li = "<li onclick='get(&apos;"+item[0]+"&apos;,&apos;"+item[1]+"&apos;)' onmouseover='this.style.backgroundColor=\"#ffff66\";'onmouseout='this.style.backgroundColor=\"#fff\";'>"+item[1]+"</li>";
				  	 	 //alert(li);
				  	 	 $(".on_changes").append(li);
				    });
				}
			});
			
			// 控制下拉框显示
			var display =$('.on_changes');
			if(display.is(':hidden')){//如果node是隐藏的则显示node元素,否则隐藏
				$(".on_changes").show();
			}else{
				$(".on_changes").hide();
			}
		}
		
		function get(data1,data2){
			//alert(data1);// 客户Id
			//alert(data2);// 客户名称
		
			$("#customerName").val(data2);
		
			$(".on_changes").hide();
		}


你可能感兴趣的:(jquery实现点击input弹出下拉框)