Vue-cli3 ,js根据汉字或拼音模糊搜索功能,汉字支持同音字、多音字,支持首字母

news/2024/11/24 9:32:59/

输入汉字模糊查询同音字,多音字,支持首字母,

目标用户为视障人士,需求是:
匹配字段:“行为” 。
可以使用 “兴魏”,“性未”,“xw”,“xingwei” ,“航为”,“杭微”,“hangwei”,“hw” 。 都可以搜索到目标词语
缺点:不支持跨字,前后鼻音混淆,不知道支持的搜索范围,不过可以手动添加

网上的大部分文章都是构建拼音的检索树,或者引入一其他数据文件。然后封装方法,导出。
缺点是,出错了不知道如何解决,或者哪儿少参数可能找到比较费劲。我要的就是拿来就能用的当然,有可能我只是想要首字母,却引入了4M的配置依赖,这确实是一个弊端

推荐一个→小茗同学的博客园的【干货】JS版汉字与拼音互转终极方案,附简单的JS拼音输入法 
非常优秀,写的很详细,但是当时着急,我觉得我太菜,可能会引入错误,少什么的,就没用。

解决方案

1、汉字转拼音
2、拼音匹配目标汉字

1、汉字转拼音

网上好多,但是我用起来不方便,那么大一串,吓唬谁呢

这里→npm依赖检索,我用的就是第一个 pinyin,网站里面有使用方法
引入使用的是 let pinyin = require("pinyin");
另外,这里的转化结果是数组,需要arr.join(""),转化下,等下我用,另外最好用trim()去除前后空格,

注:pinyin-pro 下面叫这个名字的,不好用,引入总报错。You may need an appropriate loader to handle this file type.
我输入的搜索内容转化:let str = pinyin(val.trim(),{style: pinyin.STYLE_NORMAL}).join("")

2、拼音匹配目标汉字

使用的是pinyin-match→https://www.npmjs.com/package/pinyin-match,里面也有说明
我使用的是import PinyinMatch from 'pinyin-match' 引入。

PinyinMatch.match(test, 'str')   
//test为目标汉字,str为用户输入汉字,上面转化的拼音
//搜索成功返回数组,数组第一个表示,搜索到的字段开始的位置,第二个表示搜索字段结束的位置
//搜索不到返回false
注:如果有什么生僻字,文章开始我推荐的小茗同学的【干货】JS版汉字与拼音互转终极方案,附简单的JS拼音输入法 ,他的dome里面有不常用文字,然后进入vue\node_modules\pinyin\data\dict-zi-web.js ,把自己想加的加进去就好了,当然pinyin-match 同理

如果帮到你了,点个赞再走吧~


http://www.ppmy.cn/news/661380.html

相关文章

jquery easyui实现汉字拼音首字母模糊查询

本片文章并非原创,而是将网上的方法整理了一下;网上给出的代码不一定完全适合自己的项目,具体的要更加自己的情况修改; 不要直接复制粘贴代码,这样是行不通的;自己要理解前人这样实现的目的和原理 在实现…

vue pinyin-match下拉框设置拼音模糊搜索

<el-form-item label"姓名&#xff1a;" prop"substation"><el-selectv-model"formInline.substation"placeholder"全部"filterablevalue-key"id":filter-method"pinyingSub"clearableclear"clearS…

什么是模糊查询?

什么是模糊查询 介绍 &#xff08;1&#xff09;当想查询学生姓名中包含字符a&#xff0c;就需要使用到模糊查询&#xff0c;模糊查询的话使用关键字是like&#xff08;像&#xff09; &#xff08;2&#xff09;通配符 &#xff1a;任意一个字符 张_&#xff1a;张三&#x…

拼音模糊查询+java,拼音模糊查询实现

例如:模糊查询班级中所有姓 “李、刘” 的学生,只需要在查询的时候输入一个 “L” 进行查询。 string PYM = ""; foreach (char c in PersonName) {if ((int)c >= 33 && (int)c <= 126) {//字母和符号原样保留 PYM += c.ToString(); } else {//累加拼…

vue+iview实现拼音、首字母、汉字模糊搜索

最近项目做的后台管理系统中&#xff0c;要求实现一个支持拼音、首字母和汉字模糊搜索的下拉框。项目是用vueiview做的&#xff0c;iview中有select远程搜索。但是&#xff0c;iview框架也有弊病就是会将输入框中的输入值进行过滤&#xff0c;如果你搜英文的&#xff0c;ok是可…

js拼音模糊搜索

2019独角兽企业重金招聘Python工程师标准>>> https://github.com/xmflswood/pinyin-match 下面以vue-cli项目的代码做范例 1.先引用该工具&#xff0c;在用到的子组件单独使用 import PinyinMatch from pinyin-match2.使用computed即时过滤&#xff0c;注意&#xf…

antd-select拼音首字母模糊查询

antd-select拼音首字母以及汉字模糊查询 cnchar安装引入使用spell方法stroke方法 下拉框数据下拉框重写筛选函数 百度搜了很久&#xff0c;jQuery方法在react里会报错&#xff0c;终于找到了一个可以实现的第三方库cnchar。可以实现拼音首字母以及汉字模糊查询 cnchar 安装 …

用拼音输入法字典库实现同音字模糊查询

在开发各类应用管理系统中&#xff0c;一般都要实现各种查询功能&#xff0c;如何准确、快速查找到符合条件的记录&#xff0c;是实现各种查询功能的重点。系统的实际开发过程中&#xff0c;查询功能一般都是通过对字符进行比较、判断等方法来实现。我们开发一个人事管理系统中…