前端作模糊搜索

咱們先看一下效果圖：

這是搜索關鍵字cfg時，會自動匹配到config方法

一樣，咱們再看另外一個例子

經過關鍵字bi會匹配到好幾個結果

這個和一些編輯器的搜索功能很像，好比sublime text，不須要知道關鍵字的完整拼寫，只須要知道其中的幾個字母便可。

那麼這個功能在前端咱們如何去實現呢？

不考慮性能的話，咱們能夠用正則簡單實現以下：

把關鍵字拆分，加入(.?)，如cfg最終爲 (.?)(c)(.?)(f)(.?)(g)(.*?),而後拿這個正則去測試要搜索的列表，把符合要求的選項給拿出來便可

考慮到要高亮結果，咱們還要生成對應的替換表達式，最後的函數以下

var escapeRegExp = /[\-#$\^*()+\[\]{}|\\,.?\s]/g;
var KeyReg = (key) => {
    var src = ['(.*?)('];
    var ks = key.split('');
    if (ks.length) {
        while (ks.length) {
            src.push(ks.shift().replace(escapeRegExp, '\\$&'), ')(.*?)(');
        }
        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) {
        start--;
        replacer.push('$', begin, '($', begin + 1, ')');
        begin += 2;
    }
    replacer.push('$', begin);

    info = {
        regexp: reg,
        replacement: replacer.join('')
    };
    return info;
};

調用KeyReg把關鍵字傳入，拿返回值的regexp去檢測搜索的列表，把符合的保存下來便可。

到目前爲止咱們只實現了搜索功能，按更優的體驗來說，在搜索結果中，要優先把相連匹配的放在首位，如bi關鍵字，要把bind結果放到beginUpdate前面。第二個截圖是有優化的地方的。

要完成這個功能，咱們使用KeyReg返回值中的replacement，用它進行檢測，把結果中長度最長的放前面便可，這塊代碼之後有時間再補充

2018.5.31 今天重構了下，增長告終果排序，完整的代碼及使用示例以下