jQuery搜索框輸入實時進行查詢


在手機上,我們期望在搜索框中輸入數據,能夠實時更新查詢出來的內容,不需要按回車。

實現方式為:

$(".search").bind("input propertychange",function(event){
    //進行查詢操作
})

一、首先分清下面幾個概念:
onchange事件:此事件會在元素內容發生改變,且失去焦點的時候觸發。瀏覽器支持度較好。
onpropertychange事件:此事件會在元素內容發生改變時立即觸發,即便是通過js改變的內容也會觸發此事件。元素的任何屬性改變都會觸發該事件,不止是value。只有IE11以下瀏覽器支持此事件。
oninput事件:此事件會在value屬性值發生改變時觸發,通過js改變value屬性值不會觸發此事件。只有IE8以上或者谷歌火狐等標准瀏覽器支持。
二、然后我們主要是結合 HTML5 標准事件 oninput 和 IE 專屬事件 onpropertychange 事件來監聽輸入框值變化。
oninput 是 HTML5 的標准事件,對於檢測 textarea, input:text, input:password 和 input:search 這幾個元素通過用戶界面發生的內容變化非常有用,在內容修改后立即被觸發,不像 onchange 事件需要失去焦點才觸發。不過oninput 事件在 IE9 以下版本不支持,需要使用 IE 特有的 onpropertychange 事件替代。所以就有了以上的寫法。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM