jQuery App input box for real time search

In this paper, we share the specific code of jQuery-App input box to realize real-time search for your reference. The specific contents are as follows

1. Realize real-time search

In fact, the principle is very simple, real-time access to the value of the input box, and different operations for different situations.

2. Only the main event statement code is posted here, and the specific operation depends on the specific situation

//  Listen for changes in the contents of the search box   Realize real-time search 
 $(".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();
  })
  }
 });
 //  When the search box loses focus   If there is no content in the search box, restore the pre-search condition   Search if there is content 
 $(".searchContent").on("blur", function () {
  if ($(".searchContent").val().length == 0) {
  $(".searchContent").attr("placeholder", " Search ");
  $(".searchContent").css("background-image", "url(./res/png/magnify.png)");
  $(".cancelSearchBtn").addClass("none");
  $(".searchImg").addClass("none");
  } else {
  studentName = $(".searchContent").val();
  
 })
 // When the search box gets the focus and the search box has content, a cross appears, which can empty the search box content and load all the leave requests 
 $(".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("");
  });
  }
 });

 //  When sliding the leave list,   Input box loses focus   Hide the input keyboard and the button to fill out the leave form 
 $(document).scroll(function () {
  if ($(".searchContent").is(":focus")) {
  $(".searchContent").blur();
  }
 });

 //  Click on the mobile phone keyboard to search / Start button to search 
 $(document).keydown(function (event) {
  if (event.keyCode == 84 || event.keyCode == 13) {
  studentName = $(".searchContent").val();
  pageIndex = 1;
  if (mineManagement) {
   inquireMyManageClassesList(pageIndex);
  } else {
   loadData(pageIndex);
  }
  }
 });

 //  Click Cancel   Input content of the situation search box   And load all leave forms 
 $(".cancelSearchBtn").on("click", function () {
  $(".searchContent").val("");
  $(".searchContent").attr("placeholder", " Search ");
  $(".searchContent").css("background-image", "url(./res/png/magnify.png)")
  $(".cancelSearchBtn").addClass("none");
  $(".searchImg").addClass("none");
  studentName = "";
  
 });

 //  Click the search icon to search 
 $(".searchImg").on("click", function () {
  studentName = $(".searchContent").val();
  pageIndex = 1;
 
 });