在做搜尋時經常會用到我們需要監聽input 

<input type="text" id="input">

$('#input').on('keydown',function(){
    var val=$(this).val().trim();
    console.log(val) // 此時按下dd 列印 d
})
 //因為keydown事件處理函式中立即獲取文字框中的內容，通常會有一個字元的偏差
    他是在鍵盤按下瞬間觸發

所以基本不用這個方法，html5新增屬性input  非常nice

    $('#input').on('input',function(){
        var val=$(this).val().trim();
        
       console.log(val) //這個方法，當我們鍵盤按下什麼就會打印出什麼
      
    })
// 這樣也就完成了我們想要的效果做到實時監聽
 

但是我們為了考慮效能，還是要對他做一些優化的，我們本地搜尋時，讓內容延遲顯示，這個時候就要做延遲處理了

var debounce=(function(){
    var timer=null;
    return function(callback){
    clearTimeout(timer)
timer=setTimeout(function(){
    callback();
},200)
}
})()

$('#input').on('input',function(){
    var val=$(this).val().trim();
    debounce(function(){
    console.log(val) // 延遲200毫秒 列印
})
})
 

OK到這裡就完整的做好，本地搜尋啦！