jQuery搜索框输入实时进行查询

在手机上,咱们指望在搜索框中输入数据,可以实时更新查询出来的内容,不须要按回车。浏览器

实现方式为:spa

$(".search").bind("input propertychange",function(event){
    //进行查询操做
})

1、首先分清下面几个概念:
onchange事件:此事件会在元素内容发生改变,且失去焦点的时候触发。浏览器支持度较好。
onpropertychange事件:此事件会在元素内容发生改变时当即触发,即使是经过js改变的内容也会触发此事件。元素的任何属性改变都会触发该事件,不止是value。只有IE11如下浏览器支持此事件。
oninput事件:此事件会在value属性值发生改变时触发,经过js改变value属性值不会触发此事件。只有IE8以上或者谷歌火狐等标准浏览器支持。
2、而后咱们主要是结合 HTML5 标准事件 oninput 和 IE 专属事件 onpropertychange 事件来监听输入框值变化。
oninput 是 HTML5 的标准事件,对于检测 textarea, input:text, input:password 和 input:search 这几个元素经过用户界面发生的内容变化很是有用,在内容修改后当即被触发,不像 onchange 事件须要失去焦点才触发。不过oninput 事件在 IE9 如下版本不支持,须要使用 IE 特有的 onpropertychange 事件替代。因此就有了以上的写法。code

相关文章
相关标签/搜索