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