input实时监听文本框内容

在做搜索时经常会用到我们需要监听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到这里就完整的做好，本地搜索啦！