JavaScript實現(xiàn)前端實時搜索功能
更新時間：2020年03月26日 16:30:02 作者：zhangr16xyz
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)前端實時搜索功能
，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
大部分頁面都具備搜索功能。而作為前端，我們的目的只是將用戶輸入的內(nèi)容返回給后臺而后呈現(xiàn)反饋數(shù)據(jù)給用戶，具體實現(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="請輸入檔口名稱"></input> </p> <p class="searcher-cancel">取消</p> </div>
這里涉及一個問題如何將搜索圖標放入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事件只在鍵盤或者鼠標操作改變對象屬性，且失去焦點時觸發(fā)，腳本觸發(fā)無效。
onkeydown/onkeypress/onkeyup在處理復(fù)制、粘貼、拖拽、長按鍵（按住鍵盤不放）等細節(jié)上并不完善。
onpropertychange不用考慮是否失去焦點，不管js操作還是鍵盤鼠標手動操作，只要HTML元素屬性發(fā)生改變即可立即捕獲到。遺憾的是，onpropertychange為IE專屬的。
//監(jiān)聽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('');
//有結(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">暫時無法找到此選項~</div>';
$('.searcher-list').html(html);
}
});
}
注意這里有一個replaceIllegalStr()方法,類似正則,目的是過濾掉一些無用的符號以免給后端接收數(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.緩存
這里我們將點擊的數(shù)據(jù)保存在本地緩存里，供取用呈現(xiàn)：
注： epm是自己封裝的一個方法與屬性的對象
//設(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
得到點擊的相應(yīng)的緩存詞里的value，再次發(fā)送ajax:
更多搜索功能實現(xiàn)的精彩文章，請點擊專題：javascript搜索功能匯總 進行學(xué)習(xí)
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- js實現(xiàn)帶搜索功能的下拉框?qū)崟r搜索實時匹配
- JS仿百度搜索自動提示框匹配查詢功能
- js實現(xiàn)搜索框關(guān)鍵字智能匹配代碼
- JS使用replace()方法和正則表達式進行字符串的搜索與替換實例
- JS 頁面內(nèi)容搜索，類似于 Ctrl+F功能的實現(xiàn)代碼
- javascript搜索自動提示功能的實現(xiàn)
- JavaScript數(shù)組的快速克隆(slice()函數(shù))和數(shù)組的排序、亂序和搜索(sort()函數(shù))
- 用JS將搜索的關(guān)鍵字高亮顯示實現(xiàn)代碼
- js調(diào)用百度地圖及調(diào)用百度地圖的搜索功能
- JS實現(xiàn)表格數(shù)據(jù)各種搜索功能的方法
相關(guān)文章
DOM（文檔對象模型）是一種用于表示和操作HTML和XML文檔的標準，在JavaScript中，可以使用DOM?API來對DOM進行操作，下面就來看看常見的操作都有哪些吧2023-08-08
新手快速學(xué)習(xí)JavaScript免費教程資源匯總
這篇文章主要介紹了新手快速學(xué)習(xí)JavaScript免費教程資源匯總，都是非常不錯的學(xué)習(xí)站點，有需要的小伙伴可以參考下。2015-06-06
下面小編就為大家分享一篇layui表格checkbox選擇全選樣式及功能的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
相信很多與頁面打過交道的同學(xué)都對 Yahoo 的 Best Practices for Speeding Up Your Web Site 不陌生2011-10-10
IE不出現(xiàn)Flash激活框的小發(fā)現(xiàn)的js實現(xiàn)方法
IE不出現(xiàn)Flash激活框的小發(fā)現(xiàn)的js實現(xiàn)方法...2007-09-09
這篇文章主要介紹了JS數(shù)組splice操作,結(jié)合實例形式分析了javascript使用splice方法刪除數(shù)組元素相關(guān)操作技巧,需要的朋友可以參考下2019-10-10
這篇文章主要介紹了原生js如何實現(xiàn)表單驗證功能，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2021-02-02
向?qū)Э梢宰屇愕木W(wǎng)站用戶快速上手使用你的web應(yīng)用，提高網(wǎng)站的吸引力。向?qū)б话惴譃楹脦讉€步驟，每個步驟收集一些數(shù)據(jù)，并且支持退回功能，所有步驟完成后可以得到每一步的收集結(jié)果。這里給大家展示一種比較通用，靈活且簡單的向?qū)Э蚣堋?/div> 2011-08-08
BootstrapTable與KnockoutJS相結(jié)合實現(xiàn)增刪改查功能【二】
這篇文章主要介紹了BootstrapTable與KnockoutJS相結(jié)合實現(xiàn)增刪改查功能【二】的相關(guān)資料，非常具有參考價值，感興趣的朋友一起學(xué)習(xí)吧2016-05-05
所謂貪婪匹配就是匹配重復(fù)字符是盡可能多的匹配，非貪婪匹配就是盡可能少的匹配，下面通過一個例子給大家分享JavaScript正則表達式的貪婪匹配和非貪婪匹配，感興趣的朋友參考下吧2017-09-09最新評論