jQuery-App輸入框?qū)崿F(xiàn)實時搜索

更新時間：2020年11月19日 10:58:03 作者：前端設(shè)計詩

這篇文章主要為大家詳細介紹了jQuery-App輸入框?qū)崿F(xiàn)實時搜索，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了jQuery-App輸入框?qū)崿F(xiàn)實時搜索的具體代碼，供大家參考，具體內(nèi)容如下

1、實現(xiàn)實時搜索

其實原理就是很簡單，實時獲取輸入框的值即可，并且對不同情況操作進行不同處理。

2、這里只貼出主要事件語句代碼，具體一些操作要視具體情況而定

// 監(jiān)聽搜索框的內(nèi)容變化 實現(xiàn)實時搜索
 $(".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();
  })
  }
 });
 // 搜索框失去焦點時 如果搜索框沒有內(nèi)容則恢復(fù)搜索前狀況 如果有內(nèi)容則搜索
 $(".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();
  
 })
 //搜索框獲得焦點時，并且搜索框有內(nèi)容的時候，出現(xiàn)打叉，打叉可以清空搜索框內(nèi)容并加載全部請假單
 $(".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);
  }
  }
 });

 // 點擊取消 情況搜索框的輸入內(nèi)容 并加載全部請假單
 $(".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;
 
 });

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: