jQuery-App输入框实现实时搜索
本文实例为大家分享了jQuery-App输入框实现实时搜索的具体代码，供大家参考，具体内容如下
1、实现实时搜索
其实原理就是很简单，实时获取输入框的值即可，并且对不同情况操作进行不同处理。
2、这里只贴出主要事件语句代码，具体一些操作要视具体情况而定
//监听搜索框的内容变化实现实时搜索
$(".searchContent").bind("inputpropertychangechange",function(){
studentName=$(".searchContent").val();
varsearchContent=$(".searchContent").val();
if(searchContent.length>0){
$(".clearSearchContent").removeClass("none");
$(".clearSearchContent").on("click",function(){
$(".searchContent").val("");
studentName=$(".searchContent").val();
pageIndex=1;
$(".clearSearchContent").addClass("none");
$(".searchContent").focus();
})
}
});
//搜索框失去焦点时如果搜索框没有内容则恢复搜索前状况如果有内容则搜索
$(".searchContent").on("blur",function(){
if($(".searchContent").val().length==0){
$(".searchContent").attr("placeholder","搜索");
$(".searchContent").css("background-image","url(./res/png/magnify.png)");
$(".cancelSearchBtn").addClass("none");
$(".searchImg").addClass("none");
}else{
studentName=$(".searchContent").val();
})
//搜索框获得焦点时，并且搜索框有内容的时候，出现打叉，打叉可以清空搜索框内容并加载全部请假单
$(".searchContent").on("focus",function(){
$(".searchContent").attr("placeholder","");
$(".searchContent").css("background-image","");
$(".searchImg").removeClass("none");
varsearchContent=$(".searchContent").val();
if(searchContent.length>0){
$(".clearSearchContent").removeClass("none");
$(".clearSearchContent").on("click",function(){
$(".searchContent").val("");
});
}
});
//当滑动请假单列表时输入框失去焦点则隐藏输入键盘和填写请假单的按钮
$(document).scroll(function(){
if($(".searchContent").is(":focus")){
$(".searchContent").blur();
}
});
//点击手机键盘的搜索/开始按钮进行搜索
$(document).keydown(function(event){
if(event.keyCode==84||event.keyCode==13){
studentName=$(".searchContent").val();
pageIndex=1;
if(mineManagement){
inquireMyManageClassesList(pageIndex);
}else{
loadData(pageIndex);
}
}
});
//点击取消情况搜索框的输入内容并加载全部请假单
$(".cancelSearchBtn").on("click",function(){
$(".searchContent").val("");
$(".searchContent").attr("placeholder","搜索");
$(".searchContent").css("background-image","url(./res/png/magnify.png)")
$(".cancelSearchBtn").addClass("none");
$(".searchImg").addClass("none");
studentName="";
});
//点击搜索图标进行搜索
$(".searchImg").on("click",function(){
studentName=$(".searchContent").val();
pageIndex=1;
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。