vue中利用pinyin-pro純前端實(shí)現(xiàn)拼音的模糊搜索功能
更新時(shí)間：2022年11月22日 17:01:59 作者：止息
這篇文章主要介紹了vue中利用pinyin-pro純前端實(shí)現(xiàn)拼音的模糊搜索,實(shí)現(xiàn)思路很簡單，通過安裝配置插件編寫工具類，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
1、安裝配置插件
pinyin-pro官網(wǎng)網(wǎng)址：
npm 安裝
npm install pinyin-pro
項(xiàng)目中引入
import { pinyin } from 'pinyin-pro';2.編寫工具類方法
定義三個(gè)變量：
// 雙向綁定搜索框,由用戶輸入的數(shù)據(jù)
inputProvince: 'ninxia',
// 從后臺獲取的，篩選前的總數(shù)據(jù)
totalProvinceList: [
{ province: '寧夏省'，id：'0001', turnover: '50' },
.....
],// 由inputProvince從totalProvence中篩選后的數(shù)據(jù)，雙向綁定列表 provinceList: [],
編寫方法：
在vue中定義方法用的是mehtod(){return 0}的形式，其他框架中視情況改變定義的辦法
// 輸入框搜索有關(guān)方法
pinyinFilter (inputValue, totalList) { // 工具類方法，從數(shù)組中過濾出漢字、拼音、拼音首字母相同的項(xiàng)
/* 輸入內(nèi)容拼音轉(zhuǎn)換 */
// 完整拼音
const pyInput = pinyin(inputValue, { toneType: 'none', type: 'array' }).join('')
console.log('pyInput', pyInput)
// 拼音首字母
const headerPyInput = pinyin(inputValue, { pattern: 'first', type: 'array' }).join('')
console.log('headerPyInput', headerPyInput)
return totalList.filter(e => {
// 列表中每項(xiàng)的拼音
const pyE = pinyin(e.province, { toneType: 'none', type: 'array' }).join('').slice(0, pyInput.length)
console.log('pyE', pyE)
// 列表中每項(xiàng)的拼音首字母
const headerPyE = pinyin(e.province, { pattern: 'first', type: 'array' }).join('').slice(0, headerPyInput.length)
console.log('headerPyE', headerPyE)
console.log('_____________________')
// 過濾匹配
return e.province.includes(inputValue) || (pyE === pyInput) || (headerPyE === headerPyInput)
})
},3.調(diào)用方法
筆者使用的是vue，所以在數(shù)據(jù)的調(diào)用前加了this.
this.provinceList = this.pinyinFilter(this.inputProvince, this.totalProvinceList)
到此這篇關(guān)于vue中利用pinyin-pro純前端實(shí)現(xiàn)拼音的模糊搜索的文章就介紹到這了,更多相關(guān)vue 模糊搜索內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
Vue是一套用于構(gòu)建前后端分離的框架。剛開始是由國內(nèi)優(yōu)秀選手尤雨溪開發(fā)出來的，目前是全球“最”流行的前端框架。使用vue開發(fā)網(wǎng)頁很簡單，并且技術(shù)生態(tài)環(huán)境完善，社區(qū)活躍，是前后端找工作必備技能！下面來看看其得安裝及使用方法吧2021-10-10
組件是Vue.js的最核心的功能,所謂的組件化就是把頁面拆分成多個(gè)組件,每個(gè)組件單獨(dú)使用CSS,JS,模板,圖片等資源進(jìn)行開發(fā)與維護(hù),然后在制作網(wǎng)頁的時(shí)候根據(jù)需要調(diào)用相關(guān)的組件,這篇文章主要給大家介紹了關(guān)于vue.js全局組件和局部組件的相關(guān)資料,需要的朋友可以參考下2022-12-12
這篇文章主要為大家詳細(xì)介紹了3種vue組件的書寫形式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
Vue常見報(bào)錯(cuò)整理大全(從此報(bào)錯(cuò)不害怕)
寫代碼的過程中一定會遇到報(bào)錯(cuò),遇到報(bào)錯(cuò)不要擔(dān)心,認(rèn)真分析就可以解決報(bào)錯(cuò),同時(shí)積累經(jīng)驗(yàn),早日成為大牛,這篇文章主要給大家介紹了關(guān)于Vue常見報(bào)錯(cuò)整理的相關(guān)資料,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了vue中使用@blur獲取input?val值的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
本文主要介紹了vue3+quasar彈窗的幾種方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
vue3組件化開發(fā)之可復(fù)用性的應(yīng)用實(shí)例詳解
不斷把公共的、可以獨(dú)立拆分出來的抽出來作為一個(gè)獨(dú)立可復(fù)用的組件來向上提供調(diào)用,這樣讓我們的代碼更加方便組織和管理,并且擴(kuò)展性也更強(qiáng),下面這篇文章主要給大家介紹了關(guān)于vue3組件化開發(fā)之可復(fù)用性應(yīng)用的相關(guān)資料,需要的朋友可以參考下2022-06-06
echarts鼠標(biāo)覆蓋高亮顯示節(jié)點(diǎn)及關(guān)系名稱詳解
下面小編就為大家分享一篇echarts鼠標(biāo)覆蓋高亮顯示節(jié)點(diǎn)及關(guān)系名稱詳解，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了VUE v-bind 數(shù)據(jù)綁定,簡單點(diǎn)來說就是對 HTML 中的元素，我們可以使用 v-bind 來進(jìn)行綁定和動態(tài)的數(shù)據(jù)輸出，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-05-05
vue中每個(gè)組件都是隔離的,包括父組件和子組件,各組件之間需要數(shù)據(jù)通信,就涉及到了組件傳值,本文給大家介紹vue中組件間多種傳值方式案例,感興趣的朋友跟隨小編一起看看吧2024-03-03