1. 首先在html页面定义一个div和获取下拉菜单的div
<div class="col-xs-7">
<input type="text" class="form-control" placeholder="请选择上报机构" id="reportOrgan" onblur="setTimeout('hideOrganDiv()',200);" onfocus="getOrganList();" onkeydown="clearInput();" onkeyup="innerKeydown();" autocomplete="off">
</div>
<div id="organ" onclick="hideOrganDiv();">
</div>
2. 通过ajax获取后台传过来的数据实现onfocus这个方法
(这里写的是你获取你要做下拉功能的数据)
//获取所有上报机构
function getOrganList(){
var parms = new Object();
parms["reportOrgan"]=$("#reportOrgan").val();
$.ajax({
cache: true,
type: "POST",
url: ctx+'/report/findOrganList.do',
data: parms,
async: false,
success:function(data){
var json = $.parseJSON(data);
if(json.data.length > 15){
var html = "<table class='altrowstable'>";
}else{
var html = "<table class='altrowstables'>";
}
for(var i=0;i<json.data.length;i++){
html += "<tr><td onclick=\"selectValue(this);\">" + json.data[i].sysOrganName + "</td></tr>";
}
html += "</table>";
//将获得的数据填充到下拉的数据框里也就是table里
$("#organ").html(html);
$("#organ").css("display", "block");
$("#organ").css("left", $("#reportOrgan").offset().left + "px");
$("#organ").css("top", $("#reportOrgan").offset().top + $("#reportOrgan").height() + 14 + "px");
},
error: function(request) {
layer.msg("Connection error", {
icon : 2
});
}
});
}
3. 获取输入框的内容并动态查询
//选择机构
function selectValue(obj){
var organName = $(obj).text();
$("#reportOrgan").val(organName);
}
//输入框中根据用户输入内容动态查询
var clocker = null;
function innerKeydown() {
if(null == clocker) {
clocker = setTimeout(getOrganList,700);
//连续击键,重新开始计时
} else {
clearTimeout(clocker);
clocker = setTimeout(getOrganList,700);
}
}
function hideOrganDiv(){
$("#organ").css("display", "none");
}
function clearInput(){
$("#reportOrgan").val("");
}
4. 调试下拉框的样式
<style>
#organ{height:auto; width:200px; position:absolute; display:none; border:1px solid silver;background-color: white;z-index: 10;}
table.altrowstable {
font-family: verdana,arial,sans-serif;
font-size:15px;
color:#333333;
border-width: 1px;
border-color: #a9c6c9;
border-collapse: collapse;
background: white;
display:block;
height:300px;
overflow:auto;
}
table.altrowstables {
font-family: verdana,arial,sans-serif;
font-size:15px;
color:#333333;
border-width: 1px;
border-color: #a9c6c9;
border-collapse: collapse;
background: white;
}
table.altrowstable tr {
border-width: 0px;
padding: 1px;
border-style: solid;
border-color: #a9c6c9;
}
table.altrowstable td {
border-width: 0px;
padding: 1px;
border-style: solid;
border-color: #a9c6c9;
}
</style>
这样一个简单的下拉框模糊查询功能就实现了(^▽^)