vue中利用pinyin-pro纯前端实现拼音的模糊搜索功能

1、安装配置插件

pinyin-pro官网网址：

pinyin-pro - npm (npmjs.com)

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 模糊搜索内容请搜索编程宝库以前的文章，希望以后支持编程宝库！

 前言使用 pnpm 搭建一个 Monorepo 组件库使用 Next.js 开发一个组件库文档changesets 来管理包的 version 和生成 changelog使用 ...