輸入漢字模糊查詢同音字，多音字，支持首字母，

目標用戶為視障人士，需求是：
匹配字段：“行為” 。
可以使用 “興魏”，“性未”，“xw”，“xingwei” ，“航為”，“杭微”，“hangwei”，“hw” 。 都可以搜索到目標詞語
缺點：不支持跨字，前后鼻音混淆，不知道支持的搜索范圍，不過可以手動添加

網上的大部分文章都是構建拼音的檢索樹，或者引入一其他數據文件。然后封裝方法，導出。
缺點是，出錯了不知道如何解決，或者哪兒少參數可能找到比較費勁。我要的就是拿來就能用的當然，有可能我只是想要首字母，卻引入了４Ｍ的配置依賴，這確實是一個弊端

推薦一個→小茗同學的博客園的【干貨】JS版漢字與拼音互轉終極方案，附簡單的JS拼音輸入法　
非常優秀，寫的很詳細，但是當時著急，我覺得我太菜，可能會引入錯誤，少什么的，就沒用。

解決方案

１、漢字轉拼音
２、拼音匹配目標漢字

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 同理

如果幫到你了，點個贊再走吧~

總結

以上是生活随笔為你收集整理的Vue-cli3 ，js根据汉字或拼音模糊搜索功能,汉字支持同音字、多音字，支持首字母的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。