Vue 使用 PinyinMatch实现拼音匹配搜索

最新推荐文章于 2024-05-10 10:58:55 发布
最新推荐文章于 2024-05-10 10:58:55 发布
阅读量1.6k 收藏 1
点赞数 1
文章标签： javascript vue npm
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chm666/article/details/120367326
版权 

 

PinyinMatch实现拼音匹配，分词、缩写、多音字匹配能力 参考pinyin-match - npm npm install pinyin-match --save pinyin-match
 

支持多音字, 繁体字，首字母缩写的拼音搜索引擎
 

1. 封装工具方法：
 

 

2.  watch 监听搜索值变化实现实时更新数据
 

 

                

        

        

    




    

      

        

            

              
                
                  chm666
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    1
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    1
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
pinyin-match:拼音匹配，具备分词、缩写、多音字匹配能力，支持繁体版

				
			

			

				

					05-12
				

			

		

		

			
				
如果有帮助，麻烦点个Star
pinyin-match
能够使用拼音快速检索目标。
简体版27KB (gzip ≈ 19KB)，繁体版86KB (gzip ≈ 60KB)
支持多音字、繁体字、拼音首字母匹配,具备分词功能
返回位置信息，可用于高亮匹配字符
在长多音字串下依然有高性能
在线演示：;
安装
npm install pinyin-match --save
支持[removed]引入
简体：[removed][removed]
繁体：[removed][removed]
使用方式：
PinyinMatch.match('xxx', 'x')
API
.match(input, keyword)
查询匹配拼音的数据。
参数：
input {strin

			
		

	



                

              
                



	

		

			

				
					
vue 实现模糊检索并根据其他字符的首字母顺序排列

				
			

			

				

					10-16
				

			

		

		

			
				
主要介绍了vue 实现模糊检索，并根据其他字符的首字母顺序排列,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下

			
		

	



                


  
              

                


	

		

			

				
					
vue.js + element中el-select实现拼音匹配，分词、缩写、多音字匹配能力

				
			

			

				

					li00828的博客
				

				

					12-19
					
					7920
					
				

			

		

		

			
				
因为项目需要，需要在element原有可搜索下拉框的基础上添加设置拼音简码即可跳出的功能

在网上搜了很多也没有发现跟element完美匹配的，就自己写了一种方法可以跟element完美匹配，话不多说，直接上流程

1、既然要用到拼音搜索，我们就需要一个拼音库，在这里我推荐一个第三方包：https://github.com/xmflswood/pinyin-match，在这里首先对这个包的开发者表...

			
		

	





	

		

			

				
					
vue中中文汉字转拼音的小工具

					
最新发布

				
			

			

				

					PinelliaLogic的博客
				

				

					05-10
					
					443
					
				

			

		

		

			
				
vue中中文汉字转拼音的小工具。

			
		

	



		

			
		



	

		

			

				
					
VUE和Element-UI下拉框select实现拼音，中文搜索

				
			

			

				

					Jackchen9900的博客
				

				

					02-11
					
					2703
					
				

			

		

		

			
				
需求：用户要求打出首字母就能搜索到内容，而不是打汉字。

需求分析：element自带搜索功能，支持汉字搜索，拼音的话需要引入第三方插件了。经过实验 pinyin-match完美实现。

解决过程：

首先安装 npm install pinyin-match --save

全局引用和局部引用皆可，这里我们使用了局部引用
import pinyin from "pinyin-match";



给select标签添加


filterable :filter-method="pinyingMatch".

			
		

	





	

		

			

				
					
纯前端实现拼音搜索

				
			

			

				

					weixin_44143279的博客
				

				

					11-17
					
					1538
					
				

			

		

		

			
				
select实现前端拼音搜索



			
		

	





	

		

			

				
					
Vue项目中 实现ElementUi框架el-select拼音搜索功能

				
			

			

				

					qq_25650505的博客
				

				

					07-09
					
					2785
					
				

			

		

		

			
				
Vue项目中 实现ElementUi框架el-select拼音搜索功能拼音搜索功能
拼音搜索功能
前言：由于项目需要，且elementUI中的el-select只支持中文或英文匹配，不支持全拼音匹配或拼音首字母匹配，故封装该功能。



代码依赖
​	第三方包：pinyin-match
​	地址： https://github.com/xmflswood/pinyin-match


代码支持：

全拼音匹配 当输入beijing 可以匹配如下：“北京” “背景” “北京烤鸭”
拼音首字母匹配 当输入bj时

			
		

	





	

		

			

				
					
Vue - 选择器拼音快速检索目标（pinyin-match）

				
			

			

				

					技术共享，共同进步！
				

				

					07-01
					
					2868
					
				

			

		

		

			
				
Vue  -  选择器拼音快速检索目标（pinyin-match）

			
		

	





	

		

			

				
					
pinyin-match选择器拼音快速检索目标

				
			

			

				

					前端开发工程师博客
				

				

					09-26
					
					904
					
				

			

		

		

			
				
pinyin-match选择器拼音快速检索目标。

			
		

	





	

		

			

				
					
Vue antdv a-select 内容搜索过滤（filterOption，包含 vue2 vue3）

					
热门推荐

				
			

			

				

					卡尔特斯
				

				

					05-20
					
					1万+
					
				

			

		

		

			
				
在使用 a-select 的时候，有时候需要支持搜索，这个时候需要跟选项框中的内容进行匹配。


这个是要就需要使用到 filterOption 这个属性了
<template>
  <a-select
    showSearch
    :filterOption="filterOption"
    :getPopupContainer="(triggerNode) => triggerNode.parentNode"
    style="width: 200px"
  ..

			
		

	





	

		

			

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

				
			

			

				

					Lazy33的博客
				

				

					03-11
					
					2448
					
				

			

		

		

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

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

			
		

	





	

		

			

				
					
前端拼音（汉字）检索，好用的插件 pinyin-match

				
			

			

				

					IT_dabai的博客
				

				

					08-12
					
					1634
					
				

			

		

		

			
				
好用的前端拼音检索插件（汉字也可检索），无需请求后端接口，只需针对当前已获取的数据源进行操作，对符合条件的数据进行返回显示，即可完成拼音检索

			
		

	





	

		

			

				
					
vue安装遇到的5个报错及解决方法

				
			

			

				

					12-03
				

			

		

		

			
				
前言
这篇博文不会教你怎么安装vue，但会告知安装过程中可能遇到的5个问题
5个报错
①：若使用vue -V查询是否安装vue时提示没有找到指令，可能是你没有安装vue-cli脚手架（vue-cli可快速创建vue项目）
　　　　        
②：vue安装淘宝镜像时报错，提示无效的配置，必须是完整合法的http地址，原因是我在url前面加了1个空格，这里不要有空格
注：安装淘宝镜像后，需要用到npm的地方都可以用cnpm替换，但建议安装模块和插件用cnpm，打包和启动vue用npm
（cnpm是国内镜像，npm服务器在国外，固cnpm安装速度更快，但可能出现更新不及时导致出现一些不可预料

			
		

	





	

		

			

				
					
vue实现全匹配搜索列表内容

				
			

			

				

					10-16
				

			

		

		

			
				
在Vue.js中实现全匹配搜索列表内容是一项常见的需求，它能够帮助用户快速定位到符合特定条件的数据。在给出的示例代码中，我们看到一个基于Element UI库构建的搜索框和搜索按钮，以及一个用于展示搜索结果的列表。...

			
		

	





	

		

			

				
					
vue实现城市选择拼音搜索

				
			

			

				

					06-10
				

			

		

		

			
				
vue实现的城市选择，带拼音选择搜索，可以多次反复使用，数据直接请求本地的资源json数据直接请求本地的资源json

			
		

	





	

		

			

				
					
vue输入框使用模糊搜索功能的实现代码

				
			

			

				

					10-15
				

			

		

		

			
				
主要介绍了vue输入框使用模糊搜索功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

			
		

	





	

		

			

				
					
vue使用Google地图的实现示例代码

				
			

			

				

					10-17
				

			

		

		

			
				
主要介绍了vue使用Google地图的实现示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

			
		

	





	

		

			

				
					
element中el-select实现拼音搜索（el-autocomplete等下拉框搜索都可添加）

				
			

			

				

					qq_35371821的博客
				

				

					12-23
					
					3127
					
				

			

		

		

			
				
1.安装依赖包
npm install pinyin-match --save

2.全局引用或局部引用
import pinyin from 'pinyin-match'

2.添加触发方法html如下
 :filter-method="pinyinMatch"

3.编写pinyinMatch()方法
//注：Dept下拉框绑定的数组对象，copyDept是初始化copy的Dept
pinyi...

			
		

	





	

		

			

				
					
vue、angular实现根据首字母排序+搜索功能 (ui框架：Ant Design Mobile of Angular)

				
			

			

				

					m0_67862954的博客
				

				

					03-20
					
					1000
					
				

			

		

		

			
				
angular实现根据首字母排序+搜索功能 (ui框架：Ant Design Mobile of Angular)

			
		

	





	

		

			

				
					
vue使用is属性匹配组件名称实现组件切换

				
			

			

				

					03-24
				

			

		

		

			
				
对于此编程问题，C知道非常乐意回答：

通过设置vue组件的is属性，并将其绑定到一个动态的值上，可以实现组件切换。例如：

<component :is="currentComponent"></component>

其中currentComponent是一个动态绑定的值，用来控制当前显示的组件。当currentComponent的值发生改变时，显示的组件也会相应地改变。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值