最近在做一个功能：联想搜索功能。具体实现做法如下：通过实时监听输入框input的内容，来实时发起网络请求，向后台获取联想到的搜索内容并展示到前台。那么该如何实现input的实时监听呢
做法一(jQuery)：on()方法里面的input事件。兼容性好。
....
....
....
....
发送
....
....
$('.talkInput').on('input',function(){
var inputContent = $('.talkInput').val();
console.log("实时获取输入的内容-----" + inputContent);
if ($.trim(inputContent) == '') {
// 输入框没有值，隐藏之前显示的联想内容div
$(".dependentBox").css("display", "none");
}else{
// 输入框有值，就发起网络请求获取搜索内容
xunsearchFunc(inputContent);
};
});
做法二(jQuery)：bind()方法里面的input propertychange事件
....
....
....
....
发送
....
....
$(".talkInput").bind("input propertychange",function(event){
var inputContent = $(".talkInput").val();
console.log("内容-----" + inputContent);
if ($.trim(inputContent) == '') {
$(".dependentBox").css("display", "none");
}else{
xunsearchFunc(inputContent);
};
});
做法三(JS)：在html的input标签上添加一个oninput.对 谷歌、Safari、IE的部分版本、火狐有效，所以是有局限性的。
....
....
....
....
发送
....
....
function onInputFunc(event){
var inputContent = event.target.value;
console.log("内容-----" + inputContent);
if ($.trim(inputContent) == '') {
$(".dependentBox").css("display", "none");
}else{
xunsearchFunc(inputContent);
};
}
动态图
101.175525.gif
静态图
联想搜索input.png
