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 + ''));
}