JavaScript實現前端實時搜索功能

2019-11-19 16:48:14

字體：大中小

來源：轉載

供稿：網友

大部分頁面都具備搜索功能。而作為前端，我們的目的只是將用戶輸入的內容返回給后臺而后呈現反饋數據給用戶，具體實現如下：

1.基本布局：

<div class="searcher">  <p class="searcher-main">   <i><img src="img/icon/icon-search-map.png"/></i>   <input class="searcher-text" placeholder="請輸入檔口名稱"></input>  </p>  <p class="searcher-cancel">取消</p></div>

這里涉及一個問題如何將搜索圖標放入input中，網上有相關資料不做贅述：

  .searcher {   background: rgba(255, 255, 255, 0);   position: fixed;   z-index: 999;   width: 100%;   height: 6rem;   text-align: center;   font-size: 1.6rem;  }  .searcher-main {   background: #F4F4F4;   position: absolute;   left: 50%;   top: 1.2rem;   margin-left: -45%;   border-radius: 1.6rem;   width: 80%;   height: 3rem;   line-height: 3rem;  }      .searcher-text {   width: 80%;   text-align: center;   border: none;   outline: none;   background: #F4F4F4;  }  .searcher-cancel {   position: absolute;   width: 10%;   height: 3rem;   line-height: 3rem;   color: #929292;   top: 1.2rem;   right: 1rem;  }

2.step-1：

3.js部分

這里要安利IE9以上的oninput事件

onchange事件只在鍵盤或者鼠標操作改變對象屬性，且失去焦點時觸發，腳本觸發無效。
onkeydown/onkeypress/onkeyup在處理復制、粘貼、拖拽、長按鍵（按住鍵盤不放）等細節上并不完善。
onpropertychange不用考慮是否失去焦點，不管js操作還是鍵盤鼠標手動操作，只要HTML元素屬性發生改變即可立即捕獲到。遺憾的是，onpropertychange為IE專屬的。

 //監聽input框，實時渲染 $('.searcher-text').on('input', function() {  initSearchList();  });

JQ一般都是用這種+=html的方法，雖然累贅不過通過url或者tag標簽里屬性傳參較容易理解。

  //渲染搜索列表  function initSearchList() {   var List = $('.searcher-land ul');   var params = {};   //搜索過濾字符   var SEARCH_KEY = $('.searcher-text').val()   params['action'] = 'get_search_key_list';   params['market_iid'] = 1001;   params['search_type'] = TYPE;   params['search_key'] = replaceIllegalStr(SEARCH_KEY);   epm.ajax(params, function(result) {    console.log(result);    console.log(TYPE)    var html = '';    List.html('');    //有結果    if(result.data.length > 0) {     $.each(result.data, function(index, value) {      goodName = value['goods_name'];      shopName = value['shop_name'];      //判斷Name類型      itemName = (goodName) ? goodName : shopName;      html += '<li class="goods-list">' + itemName + '</li>'     });     $('.searcher-list').html(html);    }    //無結果    else {     html = '<div class="no-goods">暫時無法找到此選項~</div>';     $('.searcher-list').html(html);    }   });  }

注意這里有一個replaceIllegalStr()方法,類似正則,目的是過濾掉一些無用的符號以免給后端接收數據帶來不必要的麻煩。

function replaceIllegalStr(str) { var reg; var illegal_list = ["/", "http://",  "[", "]",  "{", "}",  "<", ">",  "＜", "＞",  "「", "」",  "：", "；",  "、", "•",  "^", "'", "/"",  "/r", "/r/n", "http://n", "/n"]; for (var i = 0; i < illegal_list.length; i++) {  if (str.indexOf(illegal_list[i]) >= 0) {   if (illegal_list[i] == '//' || illegal_list[i] == '[') {    reg = new RegExp('//' + illegal_list[i], "g");   } else {    reg = new RegExp(illegal_list[i], "g");   }   str = str.replace(reg, '');  } } return str.trim();}

4.step-2：

這里寫圖片描述

5.緩存

這里我們將點擊的數據保存在本地緩存里，供取用呈現：
注： epm是自己封裝的一個方法與屬性的對象

//設置緩存 epm.setLocalItem = function(key, value) {  if (window.localStorage) {   localStorage.setItem(key, value);  } else {   //后備方案   setCookie(key, value);  } };

//提取緩存 epm.getLocalItem = function(key) {  if (window.localStorage) {   return localStorage.getItem(key);  } else {   //后備方案   return getCookie(key);  } };

//刪除緩存 epm.removeLocalItem = function(key) {  if (window.localStorage) {   localStorage.removeItem(key);  } else {   //后備方案   removeCookie(key);  } };

這里寫圖片描述