下拉框搜索并实现模糊查询

 <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/layui/layui.all.js"></script>

<style type="text/css">

    .contain {
        width: 900px;
        margin: 15px auto;
        font-family: ‘Microsoft YaHei’;
    }

    #FuzzModelTalbe {
        width: 100%;
        text-align: center;
        border: 1px solid #e3e6e8;
        border-collapse: collapse;
        table-layout: fixed;
        display: table;
    }
        /*出现提示的样式*/
        #FuzzModelTalbe td {
            border: 1px solid #e3e6e8;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        #FuzzModelTalbe th td {
            border: 1px solid #e3e6e8;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        #FuzzModelTalbe th {
            background-color: #189AD6;
            line-height: 13px;
            color: #fff;
        }

    .hover {
        background-color: #50baeb;
        color: white;
    }

    .layui-layer {
        word-wrap: break-word;
        word-break: break-all;
    }

    #FuzzModelShow {
        position: absolute;
        display: none;
        z-index: 20000;
        height: 200px;
        overflow: hidden;
        overflow-y: auto;
        overflow-x: auto
    }
</style>

<script type="text/javascript">
    //回车事件
    function FuzzModelBind() {
        debugger;
        //给文本框设置焦点
        document.getElementById("FuzzModelTxT").focus();
        //判断table行中是否存在class=hover
        var Fuzz = -1;
        //首先判断键盘按下什么键
        var value = event.keyCode;
        //获取table
        var tb = document.getElementById('FuzzModelTalbe');
        //table里行数
        var row = tb.rows.length;

        //如果不是13，40，38就执行
        if (value != 13 && value != 40 && value != 38) {

            var ex = document.getElementById("FuzzModelTxT").offsetWidth;//获取控件本身的宽度
            var Height = document.getElementById("FuzzModelTxT").offsetHeight; //获取控件本身的高度
            var top = $("#FuzzModelTxT").offset().top; //获取元素里顶部的距离
            var left = $("#FuzzModelTxT").offset().left; //获取元素里左边的距离
            var TopShow = parseInt(top) + parseInt(Height);//顶部距离加上控件本身的高度就是div显示的高度offsetLeft

            FuzzBase_GoodsModelMess();
            $("#FuzzModelShow").css("display", "block");
        }
        switch (value) {
            case 13:
                debugger;
                for (var i = 1; i < row; i++) {
                    var hover = tb.rows[i].className;
                    //判断是否存在hover
                    if (hover == "hover") {
                        //获取tr的id
                        var trID = tb.rows[i].id;
                        //隐藏货品展示面板
                        $("#FuzzModelShow").css("display", "none");
                        //触发选择的事件
                        document.getElementById("" + trID + "").onmousedown();
                        break;
                    }
                }
                return false;
                break;
            case 40:
                for (var i = 1; i < row; i++) {
                    //判断是否存在hover
                    var hover = tb.rows[i].className;
                    var trID = tb.rows[i].id;
                    if (hover == "hover") {
                        Fuzz = i;
                        //将本行的hover删除
                        $("#" + trID + "").attr("class", "FuzzModelline");
                        //分割ID
                        var TRID = trID.split("_")
                        //取到ID的索引
                        newID = TRID[1];
                        //下一行（当前行减一）
                        var newsy = parseInt(newID) - parseInt(1);
                        //拼接新的ID（也就是下一个tr的ID）
                        var newid = '#FuzzModelhover_' + newsy + '';
                        //添加一个class="Hover"
                        $('' + newid + '').attr("class", "hover");
                        //如果到最低端时回到第一条
                        if (newID == 0) {
                            var rowjy = parseInt(row) - parseInt(2);
                            $("#FuzzModelhover_" + rowjy + "").attr("class", "hover");
                        }
                        break;
                    }
                }
                break;
            case 38:
                for (var i = 1; i < row; i++) {
                    var hover = tb.rows[i].className;
                    var trID = tb.rows[i].id;
                    if (hover == "hover") {
                        Fuzz = i;
                        //将本行的hover删除
                        $("#" + trID + "").attr("class", "FuzzModelline");
                        //分割ID
                        var TRID = trID.split("_");
                        //取到ID的索引
                        newID = TRID[1];
                        //下一行（当前行加一）
                        var newsy = parseInt(newID) + parseInt(1);
                        //拼接新的ID（也就是上一个tr的ID）
                        var newid = '#FuzzModelhover_' + newsy + '';
                        //添加一个class="Hover"
                        $('' + newid + '').attr("class", "hover");
                        var rowjy = parseInt(row) - parseInt(2);
                        //如果到最上端时点击上移回到最后一条
                        if (newsy > rowjy) {
                            $("#hover_0").attr("class", "hover");
                        }
                        break;
                    }
                }
                break;
        }
        //追加事件
        $('#FuzzModelTalbe tr').on({
            mouseenter: function () {
                $("#FuzzModelTalbe tr").attr("class", "FuzzModelline");
                $(this).attr("class", "hover");
            }
        });
        if (Fuzz == -1) {
            var rowjy = parseInt(row) - parseInt(2);
            $("#FuzzModelhover_" + rowjy + "").attr("class", "hover");
        }
    }

    //加载数据源
    function FuzzBase_GoodsModelMess() {

        //排除表头全部删除
        $("#FuzzModelTalbe tr:not(:first)").remove();
        var TxTValue = $("#FuzzModelTxT").val().replace(/\s/g, "");
        var TableTD = "";
        $.ajax({
            type: 'POST',
            async: false, //true 是异步 false：
            cache: false,
            url: "/Base_Goods/DropDownFuzzModel_GetBase_Goods", //列表窗体下拉框选择货品控件查询数据
            data: "str=" + TxTValue,
            dataType: "json",
            success: function (data) {
                for (var i = 0; i < data.length; i++) {
                    TableTD = "";
                    TableTD += '<tr id="FuzzModelhover_' + i + '" class="FuzzModelline" οnmοusedοwn="FuzzModelInfo(' + "'" + data[i].Model + "'" + ')">';
                    TableTD += "<td> " + data[i].Model + "</td >"
                    TableTD += "</tr> ";
                    $("#FuzzModelAdd").after(TableTD);
                }
            }
        })

        //出现智能提示
        $("td").on("mouseenter", function () {
            if (this.offsetWidth < this.scrollWidth) {
                var that = this;
                var text = $(this).text();
                layer.tips(text, that, {
                    tips: [1, '#0FA6D8'],
                    time: 1000
                });
            }
        });

        //调用固定表头事件
        FuzzScrollHandleBase_GoodsModel();
    }

    //点击选择添加数据
    function FuzzModelInfo(Model) {
        //赋值给文本框
        $("#FuzzModelTxT").val(Model);
        //隐藏货品展示面板
        $("#FuzzModelShow").css("display", "none");
    }

    //失去焦点事件
    function FuzzModelBlur() {
        $("#FuzzModelShow").css("display", "none");
    }

    //货品固定表头
    function FuzzScrollHandleBase_GoodsModel() {
        var ex = document.getElementById("FuzzModelTxT").offsetWidth;           //获取控件本身的宽度
        $("#FuzzModelShow").css("width", "" + parseFloat(ex) + "");
        $("#FuzzModelShow").css("max-height", "250px");
        var tableCont = document.querySelector('#FuzzModelShow')
        function scrollHandle(e) {
            var scrollTop = this.scrollTop;
            this.querySelector('thead').style.transform = 'translateY(' + scrollTop + 'px)';
        }
        tableCont.addEventListener('scroll', scrollHandle)
    }
</script>

@{
    <div style="width:100%;">
        <input id="FuzzModelTxT" type="text" value="" name="Model" AUTOCOMPLETE="off"   placeholder="输入搜索" class="form-control" οnkeyup="FuzzModelBind();" οnblur="FuzzModelBlur()" />
    </div>
    <div id="FuzzModelShow" style=" position: absolute;display:none;z-index:99999;overflow:hidden;overflow-x:auto;overflow-y:auto;">
        <table id="FuzzModelTalbe" border="1" class="table table-responsive table-bordered table-hover table-condensed" style="background-color:aliceblue">
            <thead>
                <tr class="info">
                    <th style="text-align:center">编号</th>
                </tr>
            </thead>
            <tbody id="FuzzModelAdd"></tbody>
        </table>

    </div>
}