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函數頻繁執行可能會有性能影響, 此時可以使用函數防抖的方式來控制執行頻率, 下降性能開銷, 此處不作詳細介紹.