APP上線一段時間有用戶反應說不方便找東西，其實APP的數據不大也就三四百條而以，但受限于手機端展示區域太小、信息大爆炸，大家也基本上不會去記具體的名稱都是根據模糊的印象進行搜索而且現在大家基本都用拼音搜索經常輸不準確也很正常。所以之前通過關鍵詞查找的方法不行了，思來想去還是加個同音詞搜索吧！

由于比較懶所以基本上就想看看有沒有什么現成的解決方案最好是配幾個API就能搞定的，可以找了一圈沒發現什么“簡便”的方案，像ElectricSearch、Lucene之類的后端的方案雖然特別牛逼但是一想到還要配置服務器、集成API啥的腦袋都大。所以還是放棄了！

但在查找的過程中還是有收獲的，無意中發現PinyinLite這個項目，這項目太有愛了不僅包小(經過最終測試未壓縮版的bundle增加100K左右了)而且帶了一個模糊查的的示例因此很快就實現該功能了，具體實現方案如下：

1、在原有列表數據中針對要查找的標題增加一個拼音的字段，標題的中文轉拼音是在后端MySQL實現的，具體可以參考：Mysql中文漢字轉拼音的實現(每個漢字轉換全拼)。輸出JSON如下所示：

[{"title": "戳爆她們","titlePinyin": "chuo bao ta men "......

}]

2、安裝PinyinLite及其依賴項

npm install pinyinlite --save

npm install lodash --save

npm install string_score --save

3、修改一下在React Native里的引用語法

import pinyinlite from 'pinyinlite';

import string_score from 'string_score';

import _ from 'lodash';

4、根據參數進行查詢(key為輸入的中文，db.allGames為JSON數據反序列化之后的數組對像)

//將中文拼音數據按字符串輸出

var keyPinyin = pinyinlite(key).map(item => {

return item[0]

}).join(' ');

//返回帶fuzzy匹配分值的數組

const scores = db.allGames.map(item => {

return {

data: item,

score: item.titlePinyin.score(keyPinyin)

};

})

//篩選數組獲得結果，0.3為精度控制可以根據實際結果進行調整

result = scores.filter(i => i.score > 0.3).sort((a, b) => b.score - a.score).map(item => item.data);

運行結果示例：

總結：

開發過程中最大的震撼是 JS的庫實在是太豐富了，用簡單的方法實現同音詞搜索功能，最終使Bundle未壓縮大了100K左右，執行速度大概是20毫秒以內，因此整個解決方案是可以接受的。當然可能也不是最優的解決方案，歡迎留言或郵件cbcye#live.com批評指正！

54

總結

以上是生活随笔為你收集整理的mysql同音字搜索_React-Native 给客户端来个「同音词模糊搜索」的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。