el-autocomplete 支持中文搜索也支持拼音搜索

npm install pinyin-match --save

上代码
<el-autocomplete
      popper-class="my-autocomplete"
      v-model="state"
      :fetch-suggestions="querySearch"
      placeholder="请输入内容"
      @select="handleSelect"
    >
      <template slot-scope="{ item }">
        <div class="name">{{ item.value }}</div>
        <span class="addr">{{ item.address }}</span>
      </template>
    </el-autocomplete>


import pinyinMatch from "pinyin-match";

// 核心代码
data() {
    return {
      restaurants: [
		{ value: "三全鲜食（北新泾店）", address: "长宁区新渔路144号" },
        {
          value: "Hot honey 首尔炸鸡（仙霞路）",
          address: "上海市长宁区淞虹路661号",
        },
        {
          value: "新旺角茶餐厅",
          address: "上海市普陀区真北路988号创邑金沙谷6号楼113",
        },
		],
      state: "",
    };
  },


querySearch(queryString, cb) {
      const results = this.restaurants.filter((item) => {
        const name = item.value.toLowerCase();
        const match =
          pinyinMatch.match(name, queryString) || name.includes(queryString);
        return match;
      });
      cb(results);
    },