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. 你写的return null正确吗?

    上次一篇“你写的try…catch真的有必要吗”引起了很多朋友的讨论.本次我在code review又发现了一个问题,那就是有人有意无意的写出了return null这样的代码,例如: public ...

  2. 人人都是 DBA(VIII)SQL Server 页存储结构

    当在 SQL Server 数据库中创建一张表时,会在多张系统基础表中插入所创建表的信息,用于管理该表.通过目录视图 sys.tables, sys.columns, sys.indexes 可以查看 ...

  3. 一种集合“相等性”的实现

        最近在工作中遇到了一个小的功能,就是需要向一个服务发送请求命令,需要判断请求是否发生变化,如果发生变化了,则重新请求.该问题实际上就是判断两个集合是否相等,只需要记录最后一次请求的元素的集合, ...

  4. 【译】使用newInstance()来实例化fragment

    我最近读到StackOverflow上面关于Fragment实例化的一个问题,觉得挺有趣的. new MyFragment()和MyFragment.newInstance()之间的差别是什么?应该用 ...

  5. Unity3D热更新全书-脚本(四) 用C#LightEvil搭建实际开发使用的脚本框架

    C#LightEvil之前提供了很多和Unity结合的例子,都是采用把脚本文件放置在StreamingAssets中的方法. 这样可以利用Unity的特性,放在这个目录中的CS文件会被编译器编译,我们 ...

  6. 自制Unity小游戏TankHero-2D(5)声音+爆炸+场景切换+武器弹药

    自制Unity小游戏TankHero-2D(5)声音+爆炸+场景切换+武器弹药 我在做这样一个坦克游戏,是仿照(http://game.kid.qq.com/a/20140221/028931.htm ...

  7. mysql --prompt

    mysql --prompt修改命令行链接mysql时的提示符,shell脚本示例如下 #!/bin/bash in crm) cmd='mysql -h192.168.1.2 -uroot -pro ...

  8. 如何在CRM系统中集成ActiveReports最终报表设计器

    有时候,将ActiveReports设计器集成到业务系统中,为用户提供一些自定义的数据表,用户不需要了解如何底层的逻辑关系和后台代码,只需要选择几张关联的数据表,我们会根据用户的选择生成可供用户直接使 ...

  9. Java-数组练习5

    5.从键盘上输入一个正整数n,请按照以下五行杨辉三角形的显示方式, 输出杨辉三角形的前n行.请采用循环控制语句来实现. (三角形腰上的数为1,其他位置的数为其上一行相邻两个数之和.) 1 1   1 ...

  10. Atitit 图像清晰度 模糊度 检测 识别 评价算法 源码实现attilax总结

    Atitit 图像清晰度 模糊度 检测 识别 评价算法 源码实现attilax总结 1.1. 原理,主要使用像素模糊后的差别会变小1 1.2. 具体流程1 1.3. 提升性能 可以使用采样法即可..1 ...