亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

JavaScript實(shí)現(xiàn)前端實(shí)時(shí)搜索功能

 更新時(shí)間：2020年03月26日 16:30:02   作者：zhangr16xyz  
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)前端實(shí)時(shí)搜索功能 ，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

大部分頁面都具備搜索功能。而作為前端，我們的目的只是將用戶輸入的內(nèi)容返回給后臺(tái)而后呈現(xiàn)反饋數(shù)據(jù)給用戶，具體實(shí)現(xiàn)如下：

1.基本布局：

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

這里涉及一個(gè)問題如何將搜索圖標(biāo)放入input中，網(wǎng)上有相關(guān)資料不做贅述：

 .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事件只在鍵盤或者鼠標(biāo)操作改變對(duì)象屬性，且失去焦點(diǎn)時(shí)觸發(fā)，腳本觸發(fā)無效。
onkeydown/onkeypress/onkeyup在處理復(fù)制、粘貼、拖拽、長(zhǎng)按鍵（按住鍵盤不放）等細(xì)節(jié)上并不完善。
onpropertychange不用考慮是否失去焦點(diǎn)，不管js操作還是鍵盤鼠標(biāo)手動(dòng)操作，只要HTML元素屬性發(fā)生改變即可立即捕獲到。遺憾的是，onpropertychange為IE專屬的。

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

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

 //渲染搜索列表
 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('');
 //有結(jié)果
 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);
 }
 //無結(jié)果
 else {
  html = '<div class="no-goods">暫時(shí)無法找到此選項(xiàng)~</div>';
  $('.searcher-list').html(html);
 }
 });
 }

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

function replaceIllegalStr(str) {
 var reg;
 var illegal_list = ["/", "\\",
 "[", "]",
 "{", "}",
 "<", ">",
 "＜", "＞",
 "「", "」",
 "：", "；",
 "、", "•",
 "^", "'", "\"",
 "\r", "\r\n", "\\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.緩存

這里我們將點(diǎn)擊的數(shù)據(jù)保存在本地緩存里，供取用呈現(xiàn)：
注： epm是自己封裝的一個(gè)方法與屬性的對(duì)象

//設(shè)置緩存
 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);
 }
 };

6.step-3

得到點(diǎn)擊的相應(yīng)的緩存詞里的value，再次發(fā)送ajax:

更多搜索功能實(shí)現(xiàn)的精彩文章，請(qǐng)點(diǎn)擊專題：javascript搜索功能匯總 進(jìn)行學(xué)習(xí)

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

相關(guān)文章

  • JavaScript更改字符串的大小寫

    JavaScript更改字符串的大小寫

    在javascript中涉及字符串大小寫轉(zhuǎn)換的方法有4個(gè)：toLowerCase()、toLocaleLowerCase()、toUpperCase()及toLocaleUpperCase()。今天我們主要來用下toUpperCase()和toLowerCase()方法。
    2015-05-05
  • JS使用oumousemove和oumouseout動(dòng)態(tài)改變圖片顯示的方法

    JS使用oumousemove和oumouseout動(dòng)態(tài)改變圖片顯示的方法

    這篇文章主要介紹了JS使用oumousemove和oumouseout動(dòng)態(tài)改變圖片顯示的方法,涉及javascript鼠標(biāo)事件及圖片操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-03-03
  • html嵌入javascript代碼的三種方式

    html嵌入javascript代碼的三種方式

    本文詳細(xì)介紹了html嵌入javascript代碼的三種主要方式：腳本塊的方式、引入外部獨(dú)立的.js文件、事件句柄是以html標(biāo)簽的屬性存在的，有感興趣了解的同學(xué)可以借鑒閱讀
    2023-03-03
  • 面包屑導(dǎo)航詳解

    面包屑導(dǎo)航詳解

    本篇文章我們從面包屑導(dǎo)航的樣式，面包屑導(dǎo)航的代碼等方面詳細(xì)給大家分析了它的作用和設(shè)計(jì)技巧，如果你有這方便的需要，學(xué)習(xí)參考下吧。
    2017-12-12
  • Bootstrap Paginator+PageHelper實(shí)現(xiàn)分頁效果

    Bootstrap Paginator+PageHelper實(shí)現(xiàn)分頁效果

    這篇文章主要為大家詳細(xì)介紹了Bootstrap Paginator+PageHelper實(shí)現(xiàn)分頁效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2018-12-12
  • Javascript 圓角div的實(shí)現(xiàn)代碼

    Javascript 圓角div的實(shí)現(xiàn)代碼

    為什么要做圓角的div： 圓角div平滑美觀，某些情況下有比較不錯(cuò)的效果。比如說要做一個(gè)報(bào)message的消息框，那么動(dòng)態(tài)的生成一個(gè)圓角div則很有意義。而對(duì)html樣式控制的css本身是不直接支持圓角div的。
    2009-10-10
  • JavaScript循環(huán)遍歷小結(jié)

    JavaScript循環(huán)遍歷小結(jié)

    本文給大家總結(jié)了javascript中的循環(huán)遍歷，給大家總結(jié)的非常全面，感興趣的朋友跟隨小編一起看看吧
    2018-09-09
  • ???????基于el-table和el-pagination實(shí)現(xiàn)數(shù)據(jù)的分頁效果流程詳解

    ???????基于el-table和el-pagination實(shí)現(xiàn)數(shù)據(jù)的分頁效果流程詳解

    本文主要介紹了???????基于el-table和el-pagination實(shí)現(xiàn)數(shù)據(jù)的分頁效果，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-11-11
  • 深入學(xué)習(xí)js瀑布流布局

    深入學(xué)習(xí)js瀑布流布局

    這篇文章主要幫助大家深入理解js瀑布流布局，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2016-10-10
  • JavaScript中 ES6 generator數(shù)據(jù)類型詳解

    JavaScript中 ES6 generator數(shù)據(jù)類型詳解

    generator 是ES6引入的新的數(shù)據(jù)類型，由function* 定義, (注意*號(hào)),接下來通過本文給大家介紹js中 ES6 generator數(shù)據(jù)類型，非常不錯(cuò)，感興趣的朋友一起學(xué)習(xí)吧
    2016-08-08

最新評(píng)論