vue中利用pinyin-pro纯前端实现拼音的模糊搜索功能
作者：止息
这篇文章主要介绍了vue中利用pinyin-pro纯前端实现拼音的模糊搜索,实现思路很简单，通过安装配置插件编写工具类，本文结合实例代码给大家介绍的非常详细，需要的朋友可以参考下
1、安装配置插件
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)
到此这篇关于vue中利用pinyin-pro纯前端实现拼音的模糊搜索的文章就介绍到这了,更多相关vue 模糊搜索内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！