我們先看一下效果圖:
這是搜尋關鍵字cfg
時,會自動匹配到config
方法
同樣,我們再看另乙個例子
通過關鍵字bi
會匹配到好幾個結果
這個和一些編輯器的搜尋功能很像,比如sublime text,不需要知道關鍵字的完整拼寫,只需要知道其中的幾個字母即可。
那麼這個功能在前端我們如何去實現呢?
不考慮效能的話,我們可以用正則簡單實現如下:
把關鍵字拆分,加入(.考慮到要高亮結果,我們還要生成對應的替換表示式,最後的函式如下?),如cfg最終為 (.?)(c)(.
?)(f)(.?)(g)(.*?),然後拿這個正則去測試要搜尋的列表,把符合要求的選項給拿出來即可
var escaperegexp = /[\-#$\^*()+\[\]{}|\\,.?\s]/g;
var keyreg = (key) =>
src.pop();
}src.push(')(.*?)');
src = src.join('');
var reg = new regexp(src, 'i');
var replacer = ;
var start = key.length;
var begin = 1;
while (start > 0)
replacer.push('$', begin);
info = ;
return info;
};
呼叫keyreg
把關鍵字傳入,拿返回值的regexp
去檢測搜尋的列表,把符合的儲存下來即可。
到目前為止我們只實現了搜尋功能,按更優的體驗來講,在搜尋結果中,要優先把相連匹配的放在首位,如bi
關鍵字,要把bind
結果放到beginupdate
前面。第二個截圖是有優化的地方的。
要完成這個功能,我們使用keyreg
返回值中的replacement
,用它進行檢測,把結果中長度最長的放前面即可,這塊**以後有時間再補充
2018.5.31
今天重構了下,增加了結果排序,完整的**及使用示例如下
let searcher = (() => |\\,.?\s]/g;
let escapereg = reg => reg.replace(escaperegexp, '\\$&');
//groupleft 與 groupright是對結果進一步處理所使用的分割符,可以修改
let groupleft = '(',
groupright = ')';
let groupreg = new regexp(escapereg(groupright + groupleft), 'g');
let groupextractreg = new regexp('(' + escapereg(groupleft) + '[\\s\\s]+?' + escapereg(groupright) + ')', 'g');
//從str中找到最大的匹配長度
let findmax = (str, keyword) => else if (m.length > max)
});return max;
};let keyreg = key =>
src.pop();
}src.push(')(.*?)');
src = src.join('');
let reg = new regexp(src, 'i');
let replacer = ;
let start = key.length;
let begin = 1;
while (start > 0)
replacer.push('$', begin);
info = ;
return info;
};return
}//對搜尋結果進行排序
//1. 匹配關鍵字大小寫一致的優先順序最高,比如搜尋up, 結果中的[user-page,beginupdate,update,endupdate],update要排在最前面,因為大小寫匹配
//2. 匹配關鍵字長的排在前面
result = result.sort((a, b) => findmax(b, keyword) - findmax(a, keyword));
return result;}};
})();
//假設list是待搜尋的列表
let list = ['config', 'user-page', 'bind', 'render', 'beginupdate', 'update', 'endupdate'];
//假設userinput是使用者輸入的關鍵字
let userinput = 'up';
//獲取搜尋的結果
console.log(searcher.search(list, userinput));
// ["(up)date", "begin(up)date", "end(up)date", "(u)ser-(p)age"]
對搜尋結果中的內容做進一步處理渲染出來即可,比如把(
替換成
把)
替換成
顯示到頁面上就完成了高亮示 前端本地模糊搜尋並高亮
專案需求是通過搜尋關鍵字顯示符合搜尋條件的使用者,搜尋條件是使用者暱稱和使用者唯一號碼 是一串數字 其中暱稱支援中文匹配和首字母拼音匹配。首先說說自己的想法 1.既然要支援拼音搜尋那麼必須要乙個能把中文轉化成拼音的東西 我是在網上找的大佬的 一般像這種js都是比較大的,沒有辦法字元太多 2.搜尋內容...
zTree模糊搜尋
根據搜尋的值重新顯示整個ztree 1 輸入框 2 js chatgroupserarchbtn click function function doqueryalg4name value treeobj.shownodes nodelist 指定被顯示的節點 json 資料集合 if value ...
ztree模糊搜尋
1 方法 function 載入樹方法和事件 function searchdepart newdepartcontroller.do?gettreedata datatype json data success function list var setting check view data c...