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