最近在做一个功能:联想搜索功能。具体实现做法如下:通过实时监听输入框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