前端做模糊搜尋

2021-09-13 16:22:15 字數 2913 閱讀 5484

我們先看一下效果圖:

這是搜尋關鍵字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...