<!--前端样式--> <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触发模糊查询获取后台数据库中的数据,然后动态绑定到下拉框中