前端本地模糊搜尋並高亮

2021-09-13 02:58:22 字數 1356 閱讀 8825

專案需求是通過搜尋關鍵字顯示符合搜尋條件的使用者,搜尋條件是使用者暱稱和使用者唯一號碼(是一串數字),其中暱稱支援中文匹配和首字母拼音匹配。

首先說說自己的想法:

1.既然要支援拼音搜尋那麼必須要乙個能把中文轉化成拼音的東西(我是在網上找的大佬的**,一般像這種js都是比較大的,。。。沒有辦法字元太多)

2.搜尋內容符合暱稱和唯一號需要分開判斷

開始:假如本地陣列是arr1 [,,

...]1.因為是使用本地搜尋(這裡是乙個陣列物件),並且要高亮必然要涉及到修改字段,這裡提供乙個深轉殖陣列的方法

var deepcopy = function(o)

return n;

} else if (o instanceof object)

for (var i in o)

return n;

} else

}2.需要使用轉拼音的js為 arr中每一項新增乙個儲存對應簡拼的字段,我這裡叫spelling,我這裡全部轉為大寫,

此時arr應該是這個樣子 [,,

...]3.全域性宣告乙個陣列 var arr1 = 用來儲存匹配項

4.這裡提供乙個獲取匹配內容開始的位置的方法 只返回第一次匹配上的位置

var getstartindex = function(val,inputstr)

}例子:在abcd中匹配 a或者a getstartindex("a","abcd")//0;getstartindex("ab","abcd")//0;getstartindex("c","abcd")//2

5.利用正則匹配輸入內容和要比對的字段

var newarr = deepcopy (arr)//深拷貝本地陣列

var reg = new regexp(val.trim().touppercase())//val是你輸入的內容

newarr .map(function(item)`)

}else if((item.spelling+"").match(reg))`)

}else if(item.id +"").match(reg))`)

}arr1.push(item) }})

至於為什麼要先判斷匹配上使用者名稱在判斷匹配id 是因為產品的需求問題,之後拿到arr1就可以渲染頁面;

6.總結

我的**是封裝了乙個方法的因為我的專案還有其他需求比較麻煩比如按產品規則排序什麼還有其他比較多又雜,就不貼出我的**了,我寫這些主要是提供乙個思路,我主要是想記錄兩個方法,乙個是深拷貝陣列和獲取匹配開始的index的方法。還有全拼+簡拼匹配什麼的 以後有時間來實現吧 單純想了一下感覺很麻煩,另外轉拼音的js 網上找吧!

前端做模糊搜尋

我們先看一下效果圖 這是搜尋關鍵字cfg時,會自動匹配到config方法 同樣,我們再看另乙個例子 通過關鍵字bi會匹配到好幾個結果 這個和一些編輯器的搜尋功能很像,比如sublime text,不需要知道關鍵字的完整拼寫,只需要知道其中的幾個字母即可。那麼這個功能在前端我們如何去實現呢?不考慮效能...

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...