本文实例为大家分享了jQuery-App输入框实现实时搜索的具体代码，供大家参考，具体内容如下1、实现实时搜索
1、实现实时搜索
其实原理就是很简单，实时获取输入框的值即可，并且对不同情况操作进行不同处理。
2、这里只贴出主要事件语句代码，具体一些操作要视具体情况而定
主要事件语句代码
// 监听搜索框的内容变化 实现实时搜索
$(".searchContent").bind("input propertychange change", function () {

studentName = $(".searchContent").val();

var searchContent = $(".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");

var searchContent = $(".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;

});
// 监听搜索框的内容变化 实现实时搜索
$(".searchContent").bind("input propertychange change", function () {

studentName = $(".searchContent").val();

var searchContent = $(".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");

var searchContent = $(".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;

});以上就是本文的全部内容，希望对大家的学习有所帮助。