elementUI Cascader 级联选择器 拼音模糊搜索

news/2024/11/24 13:38:05/

项目场景:

我领导说他大BOSS想要可以拼音搜索,然后我就去百度百度百度…
只是elementUI级联选择器的拼音模糊搜索,可以作为普通输入框模糊搜索的借鉴…


实现步骤:

1、下载依赖:

可以在VScode打开项目的终端里执行这行语句,或者在项目文件夹的cmd里…
这依赖好像是某个大佬写的,大佬niubility!

npm install pinyin-match --save

2、使用方法(大致结构):

方法是 挂载到全局 还是作为 私有方法 看你自身了.
配合filter-method自定义搜索逻辑使用.

在这里插入图片描述

<template>//方法直接挂上去就可以了,参数他自动获取的,不用输入<el-cascaderfilterable:filter-method="PinYinScreen"></el-cascader>
</template><script>import PinYinMatch from 'pinyin-match'; //下载了依赖,直接复制这行就可以data() {return {}},methods: {PinYinScreen(node, keyword) {//node: 节点node(有多少个选项就有多少个node)//keyword: 输入的搜索关键字//类似for循环,此方法会执行多次//返回布尔值表示是否命中//此判断为初始判断,就是正常的输入搜索逻辑if(!!~node.text.indexOf(keyword) || !!~node.text.toUpperCase().indexOf(keyword.toUpperCase())) {return true}//此判断作为拼音模糊搜索判断//匹配失败时,PinYinMatch.match()返回的是false,//匹配成功时,PinYinMatch.match()返回的是数组,//例如:match("曾经沧海", "canghai"),返回[2,3],也就是字符串出现的区间if(PinYinMatch.match(node.label, keyword)) {return true}},}
</script>

END.


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

相关文章

mysql实现根据同音字、首字母、拼音进行模糊搜索(复刻钉钉模糊搜索)

公司新上了一款低代码平台的项目,在使用过程中用户反馈搜索功能体感不好,不如钉钉的搜索灵活则尝试复刻了一下钉钉的灵活搜索,实现方式可能不同但最终展现的效果是一致的,特此记录 待优化:mysql自定义函数影响查询速度,添加索引也很慢 部分生僻字不支持汉字转拼音 思路: 创建自…

element拼音模糊搜索

1.安装依赖&#xff08;npm有问题就用cnpm&#xff09; npm install pinyin-match --save cnpm install pinyin-match --save2.引用 import pinyin from pinyin-match3.关键代码 pinyin.match(data, value); //data匹配的内容&#xff0c;value输入的内容4.示例 <templ…

中文拼音模糊查询的一种解决方法

目前在ASP.Net平台下中文拼音模糊查询的方法有好几种。不外乎都是把拼音的码放到数据库里。 今天发现另一种解决的办法。网上有人把拼音码做成SQL Server的PLUGIN&#xff0c;通过存储过程来调用。 支持GBK,BIG5,也支持词组查询。 访问这个网址&#xff1a;http://www.cppfa…

拼音匹配模糊搜索

pinyin-engine 这是一款简单高效的拼音匹配引擎&#xff0c;它能使用拼音够快速的检索列表中的数据。 使用索引以及缓存机制&#xff0c;从而在客户端实现毫秒级的数据检索它的字典数据格式经过压缩处理&#xff0c;简体中文版本仅仅 17kb 大小&#xff08;Gzip&#xff09;支…

前端模糊搜索,拼音模糊搜索,js拼音模糊搜索

zpinyin轻量级高性能的前端拼音模糊检索js插件 前言 zpinyin轻量级前端拼音模糊检索插件 使用原数据与索引数据区分模式&#xff0c;原数据大小不会对检索查询速度造成影响。 检索索引一次建立后续直接使用&#xff0c;大幅优化检索效率。 概述 该插件收录常用汉字6763个 支…

前端js实现模糊搜索和拼音搜索

前端在列表搜索功能中&#xff0c;经常遇到有很多属性的列表&#xff0c;属性的内容可能还有汉字&#xff0c;精准匹配太局限了&#xff0c;搜索条件需要很精准。 通过正则表达式进行模糊匹配 //input为输入的搜索内容 //生成input正则表达式进行模糊匹配 let inputArr inpu…

通过拼音模糊搜索汉字的功能实现

一、原由 前一段时间用php实现通讯录系统&#xff0c;需要用到拼音查找汉字功能&#xff0c;匹配通讯录的姓名字段&#xff0c;于是在网上搜索已有的开源代码&#xff0c;下面总结和分析一下思路和具体实现。 二、思路 查找了网上的多种解决方案&#xff0c;大致分为几类&am…

js实现拼音模糊搜索

模糊搜索工具函数 思路&#xff1a;通过查字典的方式&#xff0c;实现模糊匹配 话不多说&#xff0c;以下是模糊搜索的工具函数 const SimplePinYin {_pyvalue: [a,ai,an,ang,ao,ba,bai,ban,bang,bao,bei,ben,beng,bi,bian,biao,bie,bin,bing,bo,bu,ca,cai,can,cang,cao,ce,…