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批评指正!
React-Native 给客户端来个「同音词模糊搜索」的更多相关文章
- React Native系列文章
React Native版本升级的正确姿势 WebView JS与RN进行通讯 用API网关把API管起来 React-Native 给客户端来个「同音词模糊搜索」 30天React Native从零 ...
- React Native 开源项目汇总
最近闲来无事,学习了React Native开发Android APP,自我感觉RN APP的效果和Native APP比还是蛮不错,以下是找到的一些优秀源码,仅供学习参考... React Nati ...
- React Native专题
转载注明出处:地址:http://www.lcode.org本文出自:[江清清的技术专栏]本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶 ...
- React Native系列(6) - 编译安卓私有React-Native代码
为何要自己编译React Native安卓私有代码 我们在开发中遇到一个HTTP2的问题,React Native安卓客户端在和HTTP2支持的服务器通讯的过程中会有crash,见 React-Nat ...
- React Native专题-江清清
本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶相关讲解. 刚创建的React Native交流8群:533435865 欢迎各位大牛, ...
- React Native开源项目案例
(六).React Native开源项目: 1.Pober Wong_17童鞋为gank.io做的纯React Native项目,开源地址:https://github.com/Bob1993/Rea ...
- 《React Native 精解与实战》书籍连载「Android 平台与 React Native 混合开发」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
- 《React Native 精解与实战》书籍连载「iOS 平台与 React Native 混合开发」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
- 《React Native 精解与实战》书籍连载「配置 iOS 与 Android 开发环境」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
随机推荐
- MongoDB之TextSearch简介
MongoDB之TextSearch简介 MongoDB支持对文本内容执行文本搜索操作,其提供了索引text index和查询操作$text来完成文本搜索功能.下面我们通过一个简单的例子来体验一下M ...
- 必应词典UWP版-开发小结
摘要 必应词典UWP版已经上线2周了!相信有不少用户都已经体验过了吧!得益于Win10全新.强大的API,新版词典在性能上.UI体验上都有了大幅的提升,今天,小编就为大家讲讲必应词典UWP开发的故事. ...
- 将Win8.1/WP8.1应用迁移到Universal Windows Platform
在上一篇在VS2015 RC打开CTP中创建的工程,我们介绍了怎么在RC中打开CTP中创建的Universal 工程,这一篇我们来讲下怎么将Windows 8.1/WP8.1的应用迁移到Univers ...
- WPF,Silverlight与XAML读书笔记第四十八 - Silverlight网络与通讯
说明:本系列基本上是<WPF揭秘>的读书笔记.在结构安排与文章内容上参照<WPF揭秘>的编排,对内容进行了总结并加入一些个人理解. 这一部分我们重点讨论下Silverlight ...
- 在GitHub注册账户的过程
(1)第一步:首先起一个属于自己用户的名字(username),用户名字只能包含字母数字的字符或者单个连字符,不能只用单个连字符开始或者结束(only contain alphanumeric cha ...
- PSP记录个人项目耗时
PSP2.1 Personal Software Process Stage Time Planning 计划 90 ·Estimate ·估计这个任务需要多长时间 90 Development 开发 ...
- C#Light(包括unity一切C#环境可用嵌入式脚本)0.10B稳定版发布,功能已定型
yo,如题,这个呕心沥血的脚本语言终于完成了. 后面我会: 1.逐渐做一些例子.说明 2.逐渐测试我能获取到的dotnet环境,保证在所有的平台都能正常执行 3.积极推广 0.10B版本较之前的区别主 ...
- SQL—大话函数依赖与范式
说明:数据库中的某些概念真的很让人头疼,概念的东西本来就是很枯燥的,再加上枯燥的学习,那就更加枯燥了.概念这东西,你不理解也能生产东西,经验多了就行,但是为了更深入的学习,你还必须理解.这里,我抛开书 ...
- 解决URL中文乱码问题
在做一个HTTPS连接时, 要客户端合成一段HTTPS地址 如果地址含中文的话程序会crash, 检查发现原来是中文没有转码的原因 在NSString库里面找到了下面两个方法 - (NSString ...
- 启发式算法(Heuristic Algorithm)
背景: 李航的<统计学习方法>一书中提到:决策树算法通常采用启发式算法,故了解之 问题解答: 时间有限,这里也只是将算法和启发式算法的区别和简单发展摘录如下: 一.算法和启发式方法之间的差 ...