React-Native 给客户端来个「同音词模糊搜索」

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