前端做模糊搜尋

我們先看一下效果圖：

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

到目前為止我們只實現了搜尋功能，按更優的體驗來講，在搜尋結果中，要優先把相連匹配的放在首位，如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...