jquery 实现输入框联想搜索

jquery 实现输入框联想搜索

实际功能中有很多联想搜索 在这里封装成方法，变成可复用的

 <div class="autoSupRelative">
		<input type="text" class="input" name="CompanyName" id="CompanyName" autocomplete="off">
		<ul class="autoSupAbsolute"></ul>
  </div>

.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;}

/模糊查询
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').css({ 'zIndex': '100' });
        $(this).parents('.autoSupRelative').find('.autoSupAbsolute').show();
    }).on("blur", function () {
        $('.autoSupRelative').css({ 'zIndex': '' });
    });
    $(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) {
        $.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'));
    }
});