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

React-Native 给客户端来个「同音词模糊搜索」的更多相关文章

  1. React Native系列文章

    React Native版本升级的正确姿势 WebView JS与RN进行通讯 用API网关把API管起来 React-Native 给客户端来个「同音词模糊搜索」 30天React Native从零 ...

  2. React Native 开源项目汇总

    最近闲来无事,学习了React Native开发Android APP,自我感觉RN APP的效果和Native APP比还是蛮不错,以下是找到的一些优秀源码,仅供学习参考... React Nati ...

  3. React Native专题

    转载注明出处:地址:http://www.lcode.org本文出自:[江清清的技术专栏]本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶 ...

  4. React Native系列(6) - 编译安卓私有React-Native代码

    为何要自己编译React Native安卓私有代码 我们在开发中遇到一个HTTP2的问题,React Native安卓客户端在和HTTP2支持的服务器通讯的过程中会有crash,见 React-Nat ...

  5. React Native专题-江清清

    本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶相关讲解. 刚创建的React Native交流8群:533435865  欢迎各位大牛, ...

  6. React Native开源项目案例

    (六).React Native开源项目: 1.Pober Wong_17童鞋为gank.io做的纯React Native项目,开源地址:https://github.com/Bob1993/Rea ...

  7. 《React Native 精解与实战》书籍连载「Android 平台与 React Native 混合开发」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

  8. 《React Native 精解与实战》书籍连载「iOS 平台与 React Native 混合开发」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

  9. 《React Native 精解与实战》书籍连载「配置 iOS 与 Android 开发环境」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

随机推荐

  1. 人人都是 DBA(VI)SQL Server 事务日志

    SQL Server 的数据库引擎通过事务服务(Transaction Services)提供事务的 ACID 属性支持.ACID 属性包括: 原子性(Atomicity) 一致性(Consisten ...

  2. Spring AOP在函数接口调用性能分析及其日志处理方面的应用

    面向切面编程可以实现在不修改原来代码的情况下,增加我们所需的业务处理逻辑,比如:添加日志.本文AOP实例是基于Aspect Around注解实现的,我们需要在调用API函数的时候,统计函数调用的具体信 ...

  3. 对map集合进行排序

          今天做统计时需要对X轴的地区按照地区代码(areaCode)进行排序,由于在构建XMLData使用的map来进行数据统计的,所以在统计过程中就需要对map进行排序. 一.简单介绍Map   ...

  4. iOS——Core Animation 知识摘抄(三)

    原文地址:http://www.cocoachina.com/ios/20150105/10827.html CAShapeLayer CAShapeLayer是一个通过矢量图形而不是bitmap来绘 ...

  5. as3commons-bytecode 获取所有类的一个BUG

    下载了这个swc,号称可以反射出所有加载的类.已经用在了spring. 可是一运行就报错,说bytearray.uncompress出错.操. 下载整个源码,单独加载as3commons-byteco ...

  6. Git学习笔记(8)——标签管理

    本文主要记录的Git标签的作用.标签的多种创建方式,以及标签的删除,与推送,和使用GitHub的Fork参与别人的项目. 标签的作用 发布版本时,通常先在版本库中打一个标签,这样,就唯一确定了打标签时 ...

  7. 【团队分享之二】IT团队绩效提升的一些见解

  8. Redis中5种数据结构的使用场景介绍

    转载于:http://www.itxuexiwang.com/a/shujukujishu/redis/2016/0216/108.html?1455861435 一.redis 数据结构使用场景 原 ...

  9. Atitit 图像处理 公共模块 矩阵扫描器

    Atitit 图像处理 公共模块 矩阵扫描器 1.1. 调用说明对矩阵像素遍历处理调用1 2. 矩阵扫描器主题结构1 2.1. 主要说明 从像素点开始填充矩阵1 2.2. 得到模板中心点所对应的图像坐 ...

  10. WPF入门教程系列七——布局之WrapPanel与StackPanel(二)

    三. WrapPanel WrapPanel布局面板将各个控件从左至右按照行或列的顺序罗列,当长度或高度不够是就会自动调整进行换行,后续排序按照从上至下或从右至左的顺序进行. Orientation— ...