代码语言：javascript复制
<!--前端样式-->
<style>
#searchs {
width: 200px;
position: absolute;
border-top: none;
margin-top: -5px;
margin-left:112px;
}
.line {
font-size: 12px;
color: #000;
background: #C0C0C0;
width: 200px;
padding: 1px;
border:0.5px solid #fff;
text-align:center;
}
.hover {
background: #007ab8;
color: #fff;
cursor: pointer;
}
</style>
<!--绑定的下拉框-->
<div>
<h6>商品名称：</h6>
<input type="text" id="MerchantsNmae" autocomplete="off"/> <span>输入关键字进行商家查询</span>
<div id="searchs">
</div>
</div>
<!--异步商家名称-->
<script type="text/javascript">
$(function () {
$("#searchs").hide();
//无刷新技术获取通道信息keyup监听事件
$("#MerchantsNmae").keyup(function () {
$.ajax({
async:false,
data: {SupplierName: $("#MerchantsNmae").val() },
url: '/Admin/UnitedSecurities/GetSupplierName',
type: 'post',
datatype: 'json',
success: function (msg) {
$("#searchs").show();
//转化为json对象
var getdata = msg.data;
var Content = "<select multiple="multiple" style="border-radius:2px">";
if (getdata.length<=0) {
Content = "<option class='line'>无此商户</option>";
}
else {
//获取getdata数据中的数量遍历对象
for (var i = 0; i < getdata.length;i ) {
Content = "<option class='line'>" getdata[i].SupplierName "</option>";
}
}
Content = "</select>";
//清空
$("#searchs").empty();
$("#searchs").append(Content);
$(".line").hover(function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
});
//单击选折事件
$(".line").click(function () {
$("#MerchantsNmae").val($(this).text());
$("#searchs").empty();
});
}
});
});
//加载事件隐藏
$(document).click(function () {
$("#searchs").hide();
});
})
</script>效果图：keyup()事件按键被松开时发生keyup()事件，从而触发ajax触发模糊查询获取后台数据库中的数据，然后动态绑定到下拉框中
