Select下拉框使用ajax异步绑定数据

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