input事件在进行模糊搜索时，用到的即时监测input的值变化的方法(即时搜索的input和propertychange方法)

做搜索功能的时候，经常遇到输入框检查的需求，最常见的是即时搜索，今天好好小结一下。

即时搜索的方案：

（1）change事件触发事件必须满足两个条件：

a）当前对象属性改变，并且是由键盘或鼠标事件激发的（脚本触发无效）

b）当前对象失去焦点(onblur)

（2）keypress 恩，还好。。。。。就是能监听键盘事件，鼠标复制黏贴操作他就无能为力的赶脚了。。。。。

（3）propertychange（ie）和input事件

input是标准的浏览器事件，一般应用于input元素，当input的value发生变化就会发生，无论是键盘输入还是鼠标黏贴的改变都能及时监听到变化

propertychange，只要当前对象属性发生改变。

比如一个input输入文字后出现下拉框，如图：

当输入框里面内容为空时，下拉框要隐藏，可以通过input和propertychange方法实现，代码如下：

<script>
$("#search").bind("input propertychange",function(){
var value=$(this).val();
if(value){
$(".pc_search ul").show();
}else{
$(".pc_search ul").hide();
}
});
</script>

这里bind同时绑定了input和propertychange两个方法。

自己项目的例子

//input输入框改变时

    $("input[id='search-input']").bind('input propertychange', function() {

        var val = $(this).val();

        val = val.replace(/\s/g, '');

        /*var arr = val.split(''+query+'');

        console.log(arr);

        if(val==query){

            return false;

        }*/

        $(".re-search-tips").children('li').remove();

        if (val !== "") {

            $(".re-del").removeClass('disnone');

        }

        if (val == "" && query !== "") {

            $(".re-search-tips").children('li').remove();

            $(".re-search-tips li:contains('" + query + "')").html($(".re-search-tips li:contains('" + query + "')").html().replace(new RegExp('<span>' + query + '</span>', 'g'), '' + query + ''));

        }

        search(val);

    });

//搜索教练

function search(val) {

    query = val;

    temp = query;

    if (query !== "") {

        $.ajax({

            async: false,

            url: getv1 + 'schedule/coachs',

            type: 'GET',

            dataType: 'json',

            data: { query: query },

            success: function(res) {

                var qulen = res.data.length;

                if (qulen > 0) {

                    var qulist = "";

                    for (var m = 0; m < qulen; m++) {

                        var conume = res.data[m].coachNum;

                        var name = res.data[m].name;

                        qulist += '<li><a href="subinfo.html?conum=' + conume + '">' + name + '</a></li>';

                    }

                    $(".re-search-tips").append(qulist);

                    var lilen = $(".re-search-tips").children('li').length;

                    console.log(lilen);

                    for(var q=0 ;q<lilen;q++){

                        $(".re-search-tips li:eq('"+q+"'):contains('" + query + "')").html($(".re-search-tips li:eq('"+q+"'):contains('" + query + "')").html().replace(new RegExp(query, 'g'), '<span>' + query + '</span>'));

                    }

                   /* $(".re-search-tips li:contains('" + query + "')").html($(".re-search-tips li:contains('" + query + "')").html().replace(new RegExp(query, 'g'), '<span>' + query + '</span>'));*/

                }

            },

            error: function() {

                layer.msg("服务器正忙碌,请稍后再试");

            }

        });

    }

}

//删除input框里面的值

function del() {

    $("input[id='search-input']").val("");

    $(".re-search-tips").children('li').remove();

    $(".re-search-tips li:contains('" + query + "')").html($(".re-search-tips li:contains('" + query + "')").html().replace(new RegExp('<span>' + query + '</span>', 'g'), '' + query + ''));

}

巴特西

input事件在进行模糊搜索时，用到的即时监测input的值变化的方法(即时搜索的input和propertychange方法)

最新文章

热门文章