首頁 學習資料網絡教程正文

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

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

在手機上,我們期望在搜索框中輸入數據,查詢的內容可以實時更新,無需回車。

實現方法是:

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

一、首先區分以下概念:

onchange 事件:當元素內容發生變化失去焦點時會觸發該事件。瀏覽器支持很好。

onpropertychange事件:當元素內容發生變化時會立即觸發該事件easyui輸入框提示信息,即使是通過js改變的內容也會觸發該事件。當元素的任何屬性發生變化時會觸發此事件,而不僅僅是值。只有IE11以下的瀏覽器支持這個事件。

oninput 事件:該事件會在 value 屬性的值發生變化時觸發。通過js改變value屬性的值不會觸發這個事件。僅支持標準瀏覽器,例如 IE8 或更高版本或 Google Firefox。

二、那我們主要結合HTML5標準事件oninput和IE特有事件onpropertychange事件來監聽輸入框的值變化。

oninput 是一個標準的 HTML5 事件。它對于通過用戶界面檢測 textarea、input:text、input:password 和 input:search 的內容變化非常有用。內容修改后立即觸發easyui輸入框提示信息,不像 onchange 事件需要失去焦點才能觸發。但是,IE9以下的版本不支持oninput事件,需要替換為IE特有的onpropertychange事件。于是就有了上面的寫法。

隨機文章

十八禁动漫肉肉无遮挡无码