js實現輸入框聯想搜索

實現點擊和輸入搜索聯想，把搜索出的列表放到下面的ul列表中，然后再列表中選擇並把公司名賦值給輸入框，把guid賦值給隱藏域

html

<input type="hidden" name="CompanyGuid" value="" id="CompanyGuid"/>
<div class="form-group clearfix">
       <label for="inline" class="inline fl">公司名稱：</label>
       <div class="autoSupRelative fl">
            <input type="text" class="input" name="CompanyName" id="CompanyName" autocomplete="off">
            <ul class="autoSupAbsolute"></ul>
       </div>
</div>

css樣式

.autoSupRelative{position: relative;padding: 0;float:left;z-index:99;}
.autoSupAbsolute{position: absolute;left: 0;top:30px;background: #ffffff;border:1px solid #ccc;width:100%;max-height:240px;overflow-y: auto;margin: 0;padding: 0;box-shadow: 0px 2px 2px #ccc;display: none}
.autoSupAbsolute li{ list-style: none;cursor: pointer;padding: 5px;line-height: 22px;font-size: 12px;}
.autoSupAbsolute li:hover{background: #2dc3e8;color: #ffffff;}

js

//模糊查詢
function SearchLike(jsons) {
    //var timerSerch = null;
    $(document).on('keyup', '[name=' + jsons.name + ']', function () {
        var This = this;
        this.timerSerch = setTimeout(function () {//如果一直輸入，就先不查詢，等鍵抬起500毫秒之后再進行查詢。
            getSearchValue({
                This: This,
                Event: "keyup",
                url: jsons.url,
                fun: jsons.fun
            });
        }, 500);
        $(this).parents('.autoSupRelative').find('.autoSupAbsolute').show();
    });
    $(document).on('keydown', '[name=' + jsons.name + ']', function () {
        var _this = this;
        clearTimeout(_this.timerSerch);

    });
    $(document).on('click', '.autoSupAbsolute li', function (e) {
        var name = $(this).parents('.autoSupRelative').find('input[type=text]').attr('name');
        if (name == jsons.name) {
            var thisHtml = $(this).attr('companyName');//.replace('<span style="display: none; width: 0px; height: 0px;" id="transmark"></span>', '');//.split('<span')[0];
            // thisHtml = thisHtml.split(',')[0];
            if (jsons.HideName) {
                $(this).parents('.autoSupRelative').find('[name=' + jsons.HideName + ']').val($(this).attr("PK_Guid"));
            }
            if (thisHtml) {
                $(this).parents('.autoSupRelative').find('[name=' + jsons.name + ']').val(thisHtml);
            }
            if (jsons.fun1) {
                jsons.fun1(this);
            }
            $(this).parents('.autoSupRelative').find('[name=' + jsons.name + ']').siblings('ul').html('');
            $(this).parents('.autoSupAbsolute').hide();
        }
    });

    // $('[name=' + jsons.name + ']').on('click', function (e) {
    $(document).on('click', '[name=' + jsons.name + ']', function (e) {

        e.stopPropagation();
        var This = this;
        $('.autoSupRelative').css({ 'zIndex': '99' });
        $(this).parents('.autoSupRelative').css({ 'zIndex': '100' });
        $(this).parents('.autoSupRelative').find('.autoSupAbsolute').show();
        // if ($(this).parents('.autoSupRelative').find('ul li').length ==0) {//如果沒有輸入字段，就不重新檢索
        $(this).parents('.autoSupRelative').find('ul').html('<div style="padding:0 10px;">數據加載,請稍后....</div>');
        getSearchValue({
            This: This,
            Event: "click",
            url: jsons.url,
            fun: jsons.fun
        });
        // }
    }).on("blur", function () {
        $('.autoSupRelative').css({ 'zIndex': '' });
    });
    $(document).on('click', function (e) {
        $('.autoSupAbsolute').hide();
    });

    function getSearchValue(json) {
        if (jsons.setUrl) {
            //jsons.setUrl();
            json.url = jsons.setUrl();
        }
        $.ajaxSetup({ cache: false });
        $.ajax(
            {
                type: "GET",//POST
                url: json.url + encodeURIComponent($(json.This).val()),
                success: function (msg) {
                    var htmlInit = '';
                    //if (msg != "") {
                    msg = JSON.stringify(msg)
                    msg = msg.replace(/'/g, '"');//把單引號替換成雙引號
                    //var datas = jQuery.parseJSON(msg);
                    var datas = []
                    datas = jQuery.parseJSON(msg).result;
                    var html = '';
                    if (json.Event == 'click') {
                        if (datas.length == 0) {
                            $(json.This).next().val('');//清除隱藏域的賦值
                            htmlInit = '<div style="text-align:center">未找到此項....</div>';
                        } else {
                            for (var i = 0; i < datas.length; i++) {
                                if (json.fun) {
                                    htmlInit += json.fun(datas[i]);
                                } else {
                                    htmlInit += '<li PK_Guid="' + datas[i].companyGuid + '"companyName="' + datas[i].companyName + '">' + datas[i].companyName + '</li>';
                                }
                            }
                        }
                        $(json.This).parents('.autoSupRelative').find('.autoSupAbsolute').html(htmlInit);
                        $(json.This).parents('.autoSupRelative').find('.autoSupAbsolute').show();
                    }
                    if (json.Event == 'keyup') {
                        if ($(json.This).val() == '') {
                            $(json.This).parents('.autoSupRelative').find('ul').html('');
                            $(json.This).parents('.autoSupRelative').find('.autoSupAbsolute').hide();
                        } else {
                            if (datas.length == 0) {
                                $(json.This).next().val('');//清除隱藏域的賦值
                                html = '<div style="text-align:center">未找到此項....</div>';
                            } else {
                                for (var i = 0; i < datas.length; i++) {
                                    if (json.fun) {
                                        html += json.fun(datas[i]);
                                    } else {
                                        html += '<li PK_Guid="' + datas[i].companyGuid + '" companyName="' + datas[i].companyName + '">' + datas[i].companyName + '</li>';
                                    }
                                }
                            }
                            $(json.This).parents('.autoSupRelative').find('.autoSupAbsolute').html(html);
                        }
                    }
                    // }
                },
                error: function () {
                    $(json.This).parents('.autoSupRelative').find('ul').html('<div style="padding:10px;">數據加載失敗....</div>');
                }
            }
        );
    }
}

// 使用--點擊輸入框，請求接口--url是聯想搜索接口，companyName沒有值的時候顯示所有的列表--下拉列表選擇把姓名和id復制給input
SearchLike({
    name: 'CompanyName', url: '/CompanyCustomBill/CompanySimpInfo?companyName=', fun1: function (_this) {
        $("#CompanyName").val($(_this).attr('companyName'));
        $("[name=CompanyGuid]").val($(_this).attr('PK_Guid'));
    }
});