詳解jQuery如何實現模糊搜索

2019-11-19 11:36:30

字體：大中小

來源：轉載

供稿：網友

如何實現模糊搜索當我們瀏覽網頁的時候，通常能看到搜索欄，這大大的提高了我們獲取數據的目的性。
那如何去實現一個簡單的模糊搜索框呢，以下案例獲取能給你一點思路。

以下案例，可以實現當按鍵按下時，自動檢索匹配數據

基本css 樣式

.row {    height: 80px;    *//* line-height: 80px; /*/*    text-align: left;    line-height: 80px;    padding-top: 5px;    margin-bottom: 10px;  }  .inh {    width: 70px;    height: 70px;    border: 1px solid blanchedalmond;    border-radius: 5px;    line-height: 70px;    text-align: center;    margin-right: 30px;  }  img {    width: 100%;    height: 100%;  }

基本的html 樣式

<div class="search_box"><i class="fa fa-arrow-left ftop"></i>  <form action="#">    <input type="text" id="index-to" placeholder="請輸入搜索內容" autofocus onfocus="autoPlays">    <i class="fa fa-times fa=1gt rege"></i>  </form></div><div class="search_content search_default">  <ul id="view-to"></ul></div></div>

初始樣式圖如下：

/** * 自己創建一個商品數據集合 * 點擊分類時實現商品的切換 * 切換之后已經選擇好的數量需要記錄*/var arrAllProducts = [  {    type: "炒菜",    products: [      { id: 10001, name: "土豬肉燒紅薯", img: "http://recipe1.hoto.cn/pic/recipe/l/ff/4f/1134591_e480ee.jpg", price: 26.00, desc: "紅薯與肉香交互輝映，肥而不膩、酥而不碎、甜而不粘、濃而不咸。" },      { id: 10002, name: "紅燒蝦園子", img: "http://recipe1.hoto.cn/pic/recipe/l/c3/66/1140419_19dbfb.jpg", price: 28.00, desc: "傳統的《桂花酒釀圓子》有現成的賣，自己做也是簡單方便口味很不錯" },      { id: 10003, name: "宮保雞丁", img: "http://recipe0.hoto.cn/pic/recipe/g_148/6a/da/252522_0d88b3.jpg", price: 20.00, desc: "川菜館必點" }    ]  },  {    type: "商務套餐",    products: [      { id: 20001, name: "荷葉飯", img: "http://recipe0.hoto.cn/pic/recipe/g_148/72/61/1073522_c9b4af.jpg", price: 12.00, desc: "好吃的荷葉飯" },      { id: 20002, name: "奢華版荷葉飯", img: "http://recipe0.hoto.cn/pic/recipe/g_148/40/f8/849984_c84667.jpg", price: 15.00, desc: "精裝版" }    ]  },  {    type: "主食",    products: [      { id: 30001, name: "芝麻拌苦瓜", img: "http://res.hoto.cn/5c7787ea0135db3ab01db0d5.jpg!default", price: "12.00", desc: "這款燕麥南瓜餅，外皮軟糯，內餡香甜" }    ]  },  {    type: "其他",    products: [      { id: 40001, name: "蘇格蘭蛋", img: "http://recipe0.hoto.cn/pic/recipe/l/2a/67/1140522_c0045b.jpg", price: "25.80", desc: "據說這叫蘇格蘭蛋。其實油炸的我吃得少做的更少" }    ]  }] // 封裝 模糊搜索的方法function autoPlays(x) {    x.style.border = '5px soild blue'  }    $(function () {    var search_input = $(".search_box input"),      search_content = $(".search_content");    $(search_input).on("keyup", function () {      if (search_input.val() == '') {        $(search_content).show();      }      // $(".search_content li:contains(" + search_input.val().trim() + ")").show();      // $(".search_content li:not(:contains(" + search_input.val().trim() + "))").hide();      //第二中方法      $(".search_content li").hide().filter(":contains(" + search_input.val().trim() + ")").show();    });  });  $(".ftop").click(function () {    history.back(1);  })  $('#index-to').keyup(function () {    var search_input = $(".search_box input")    if (search_input.val() != '') {      $('.rege').css({        display: 'block'      })      $('#view-to').css({        display: 'block'      })    }    else {      $('#view-to').css({        display: 'none'      })      $('.rege').css({        display: 'none'      })    }  })  $('.rege').click(function () {    $('#index-to').val('');    $('#view-to').css({      display: 'none'    })    $(this).css({      display: 'none'    })  })  // 遍歷arrAllProducts 數組  for (var key in arrAllProducts) {    console.log(arrAllProducts[key].products)    $.each(arrAllProducts[key].products, function (i, value) {      var oLi = "<li class='row'><img src='' class='inh' alt='圖片加載失敗'><a href='javascript:;'>" + value.name + "</a></li>";      console.log(value.img+'nnnnnimg')      var oLis = $(oLi);      oLis.appendTo($("#view-to"))      let uuu = $('.inh')      uuu[i].src = value.img      console.log(value.name)    })  }

搜索效果圖如下：