element 配合 pinyin-match 实现下拉框拼音检索功能

项目环境

• vue-cli3
• element-ui
• pinyin-match

原理

element的select组件的filterable属性能够实现用户自定义输入检索功能, 配合filter-method来自定义检索规则, 使用pinyin-match进行拼音与汉字的匹配,便可实现拼音检索功能

pinyin-match: 传送门

实现代码

将代码直接替换到vue-cli建立的项目的app.vue中便可

<template>
  <div id="app">
    <el-select v-model="value" filterable :filter-method="PinyinMatchFun" placeholder="请选择" clearable >
        <el-option v-for="item in commonAddr" :key="item.value" :label="item.label" :value="item.value" >
        </el-option>
    </el-select>
  </div>
</template>
复制代码

<script>
import PinyinMatch from "pinyin-match"
export default {
  name: "app",
  data() {
    return {
    // 数据源
      commonAddr: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ],
    // 复制一份数据
      copycommonAddr: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ],

      value: ""
    };
  },
  methods: {
  // 过滤方法, 接收一个输入框内容做为参数, 当输入框内容改变后会执行
    PinyinMatchFun(val) {
      if (val) {
      // 定义一个空数组用来存储过滤后的数据
        var result = [];
        // 开始循环过滤内容
        this.copycommonAddr.forEach(i => {
            // 调用 PinyinMatch.match 方法进行拼音与汉字匹配
          var m = PinyinMatch.match(i.label, val);
          if (m) {
          // 匹配成功则push到result数组中
            result.push(i);
          }
        });
        // 将过滤后的数组从新赋给下拉列表数据
        this.commonAddr = result;
      } else {
      // 若是输入框为空, 则将下拉列表数据还原
        this.commonAddr = this.copycommonAddr;
      }
    }
  }
};
</script>
复制代码

其余

若是在数据量较大的状况下, PinyinMatchFun函数频繁执行可能会有性能影响, 此时可以使用函数防抖的方式来控制执行频率, 下降性能开销, 此处不作详细介绍.