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

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

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

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

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

其實(shí)原理就是很簡(jiǎn)單，實(shí)時(shí)獲取輸入框的值即可，并且對(duì)不同情況操作進(jìn)行不同處理。

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

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

 // 當(dāng)滑動(dòng)請(qǐng)假單列表時(shí) 輸入框失去焦點(diǎn) 則隱藏輸入鍵盤和填寫請(qǐng)假單的按鈕
 $(document).scroll(function () {
  if ($(".searchContent").is(":focus")) {
  $(".searchContent").blur();
  }
 });

 // 點(diǎn)擊手機(jī)鍵盤的搜索/開始按鈕進(jìn)行搜索
 $(document).keydown(function (event) {
  if (event.keyCode == 84 || event.keyCode == 13) {
  studentName = $(".searchContent").val();
  pageIndex = 1;
  if (mineManagement) {
   inquireMyManageClassesList(pageIndex);
  } else {
   loadData(pageIndex);
  }
  }
 });

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

 // 點(diǎn)擊搜索圖標(biāo)進(jìn)行搜索
 $(".searchImg").on("click", function () {
  studentName = $(".searchContent").val();
  pageIndex = 1;
 
 });

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

您可能感興趣的文章: