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函数频繁执行可能会有性能影响, 此时可使用函数防抖的方式来控制执行频率, 降低性能开销, 此处不做详细介绍.