vue中利用pinyin-pro纯前端实现拼音的模糊搜索功能
止息 人气:01、安装配置插件
pinyin-pro官网网址:
npm 安装
npm install pinyin-pro
项目中引入
import { pinyin } from 'pinyin-pro';
2.编写工具类方法
定义三个变量:
// 双向绑定搜索框,由用户输入的数据 inputProvince: 'ninxia', // 从后台获取的,筛选前的总数据 totalProvinceList: [ { province: '宁夏省',id:'0001', turnover: '50' }, ..... ],
// 由inputProvince从totalProvence中筛选后的数据,双向绑定列表 provinceList: [],
编写方法:
在vue中定义方法用的是mehtod(){return 0}的形式,其他框架中视情况改变定义的办法
// 输入框搜索有关方法 pinyinFilter (inputValue, totalList) { // 工具类方法,从数组中过滤出汉字、拼音、拼音首字母相同的项 /* 输入内容拼音转换 */ // 完整拼音 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,所以在数据的调用前加了this.
this.provinceList = this.pinyinFilter(this.inputProvince, this.totalProvinceList)
加载全部内容