本文例項為大家分享了jQuery-App輸入框實現實時搜尋的具體程式碼，供大家參考，具體內容如下

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","url(./res/png/magnify.png)")
  $(".cancelSearchBtn").addClass("none");
  $(".searchImg").addClass("none");
  studentName = "";
  
 });

 // 點選搜尋圖示進行搜尋
 $(".searchImg").on("click",function () {
  studentName = $(".searchContent").val();
  pageIndex = 1;
 
 });

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。