输入框模糊搜索(加自定义按钮)

//输入框keyup事件
function loadInputSearch(targetDom,items) {
        //输入框获取焦点
        $(targetDom).focus(function () {
            if($(targetDom) == ''){
                var searchResult = items;
                loadInputDrop(targetDom,searchResult,items);
            }else{
                var inputWords = $(targetDom).val();
                var inputWordsArray = $.trim(inputWords).split(/\s+/);
                var searchResult = items;
                $.each(inputWordsArray,function (i, item) {
                    searchResult=$.grep(searchResult, function(n, i){return n.toLowerCase().indexOf(item.toLowerCase())!=-1;});
                })
                loadInputDrop(targetDom,searchResult,items)
            }
        })
        //输入框键入
        $(targetDom).keyup(function () {
            var inputWords = $(targetDom).val();
            var inputWordsArray = $.trim(inputWords).split(/\s+/);
            var searchResult = items;
            $.each(inputWordsArray,function (i, item) {
                searchResult=$.grep(searchResult, function(n, i){return n.toLowerCase().indexOf(item.toLowerCase())!=-1;});
            })
            // console.log(searchResult);
            loadInputDrop(targetDom,searchResult,items)

        })
    }

//加载搜索下拉框
function loadInputDrop(targetDom,searchResult,items) {
        var dropBox = '<div id="dropbox"><ul id="searchList"></ul></div>'
        $("#dropbox").remove()
        $(targetDom).parent().append(dropBox)
        $("#dropbox ul").append('<li class="dropline" id="dropcustom">自定义</li>')
        for(var i = 0; i < searchResult.length; i++){
            $("#dropbox ul").append('<li class="dropline1">'+searchResult[i]+'</li>');
            if(i>100) break
        }
        $(".dropline1").hover(function(){
            $(this).css("background-color","lightblue");
        },function(){
            $(this).css("background-color","white");
        });
        $(".dropline1").mousedown(function(){
            $(targetDom).val($(this).text())
            $("#dropbox").hide()
        })
        $("#dropcustom").unbind("mousedown").bind("mousedown",function () {
            var index = layer.open({
                type: 1,
                skin: "layui-layer-rim",
                area: ["550px", 'auto'],
                title: "自定义",
                content: '<div style="margin-left: 20px">请输入自定义名称:<input type="text" id="setName" style="margin-top: 20px;"/></div>',
                btn: ['确定', '取消'],
                shadeClose:true,
                yes: function (index, layero) {
                    var customName = $.trim($("#setName").val());
                    if(customName == ''){
                        layer.alert('自定义名称不能为空!');
                    }else{
                        $(targetDom).val(customName)
                        $("#dropbox").hide()
                        items.push(customName)
                    }
                    layer.close(index);
                },
                btn2: function (index, layero) { //取消按钮后的处理函数
                    layer.close(index);
                },
            });
        })
        //输入框失去焦点
        $(targetDom).unbind("blur").bind("blur",function () {
            // console.log($(targetDom).val());
            if(searchResult.indexOf($(targetDom).val()) == -1){
                $(targetDom).val('')
            }
            $("#dropbox").hide()

        })

    }

涉及到的问题:输入框失焦事件与按钮点击事件冲突的问题
解决办法:将按钮的点击(click)事件改为按下(mousedown)事件

原代码:

       $(".dropline1").click(function(){
            $(targetDom).val($(this).text())
            $("#dropbox").hide()
        })
        $("#dropcustom").unbind("click").bind("click",function ()
css:
#dropbox{
    border:#ccc solid 1px;
    border-top: transparent;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    max-height: 150px;
    overflow:auto;
    z-index: 100;
    position: absolute;
    background-color: white;
    width: 90%;
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值