input实时模糊查询

/**
 * Created by Leon on 2020/06
 */

//input添加上tb_select_realTime类名即可实时获取输入提醒
//data-search 中输入搜索的存储变量
$(function () {
    var cpLock = false; //判断是否执行搜索   ps：打字的时候不会一直在搜索，字打上去才会执行
    $('.tb_select_realTime').on('compositionstart', function () {
        cpLock = true;
        console.log("不搜索")
    });
    $('.tb_select_realTime').on('compositionend', function () {
        cpLock = false;
        console.log("搜索");
        showLike($(this))
        // var keyWord = oTxt.value;
        // var fruitList = searchByRegExp(keyWord, fruits);
        // renderFruits(fruitList);
    });
    $(".tb_select_realTime").on('input', function () {
        if (!cpLock) {
            showLike($(this))
            // var keyWord = oTxt.value;
            // var fruitList = searchByRegExp(keyWord, fruits);
            // renderFruits(fruitList);
        }
    });
    //input 聚焦时触发
    $(".tb_select_realTime").focus(function () {
        if (!cpLock) {
            showLike($(this))
            // var keyWord = oTxt.value;
            // var fruitList = searchByRegExp(keyWord, fruits);
            // renderFruits(fruitList);
        }
    })
    
    function showLike(click_btn) {
        //MasterIDValue   上级控件的值
        //searchVal       附加的搜索条件
        var searchVal = click_btn.val().trim()
        //聚焦时可能input框值为空
        if (searchVal == '') {
            return
        }
        var sel_click_id = click_btn.attr('id');
        var queryCondSource = click_btn.attr('data-search')
        $.ajax({
            url: u1,
            type: "POST",
            async: false, // 此处不需要异步
            data: {
                "requestType": "GhrCommonListSqlJson",
                "queryCondSource": queryCondSource,
                "queryCondType": "GetEnable",
                "containBlankYN": 'N',
                "MasterIDValue": '',
                "keyWords": searchVal
            },
            success: function (data) {
                if (eval(data) != '') {
                    $('#' + sel_click_id + '_down').remove()
                    var dataValue = eval(data).slice(0, 10)
                    sel_downHtml = '<div id="' + sel_click_id + '_down" class="sel_down tb_div_selDown">\n' +
                        '<div class="sel_down_detail">\n'
                    $.each(dataValue, function (index, content) {
                        sel_downHtml = sel_downHtml + '<div data-value="' + content.ID + '" pid="' + content.PID + '" title="' + content.Name + '" οnclick="assignment($(this),$(\'#' + sel_click_id + '\'))">' + content.Name + '</div>\n'
                    });
                    sel_downHtml = sel_downHtml + '</div>';
                    console.log(sel_downHtml);
                    $('body').append(sel_downHtml);
                    $('#' + sel_click_id + '_down').toggle();
                    var selClickX = click_btn.offset().left;
                    var selClickY = click_btn.offset().top - $(window).scrollTop();
                    var selClickW = click_btn.outerWidth();
                    var selClickH = click_btn.outerHeight();
                    $('#' + sel_click_id + '_down .sel_down_detail').css('left', selClickX).css('top', selClickY + selClickH).css('width', selClickW);
                    //点击下拉展示框以外的地方下拉框消失
                    $(document).click(function () {
                        $('#' + sel_click_id + '_down').hide();
                    });
                    $('#' + sel_click_id + '_down,#' + sel_click_id + '').on("click", function (event) {
                        //如果省略这一句，将下面的e改为event，那么IE运行可以，但是其他浏览器就不兼容
                        var e = arguments.callee.caller.arguments[0] || event;
                        if (e && e.stopPropagation) {
                            e.stopPropagation();
                        } else if (window.event) {
                            window.event.cancelBubble = true;
                        }
                    });
                }
            }
        })
    }
});
//选中赋值
function assignment(sel_down_div, sel_click) {
    var selText = sel_down_div.text();
    sel_click.val(selText);
    sel_down_div.parent().parent().css('display', 'none');
}

效果图（后台传输数据参考效果图 css样式可自行定义）