HTML点击input出现下拉菜单,jquery实现点击input弹出下拉框

html:

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 = "

"+item[1]+"";

//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();

}