插件地址

https://github.com/xmflswood/pinyin-match

安装

npm install pinyin-match --save
或
<script src="pinyin-match/dist/main.js"></script>

代码(使用vue+ts+vant)

        <van-search
          v-model="input"
          shape="round"
          clear-trigger="always"
          placeholder="请通过拼音或者首字母搜索"
          background="#0185eb"
        />
<div class="GuideList" v-for="(item, index) in showList" :key="index">{{ item }}<div>


#### script

 private input = '';
  get showList() {
    // eslint-disable-next-line @typescript-eslint/no-this-alias
    const i = this;
    if (i.input) {
      const m = i.data.filter((t: any) => {
        const n = PinyinMatch.match(t.name, i.input);
        if (n) {
          return t;
        }
      });
      return m;
    }
    return i.data;
  }

触摸屏使用拼音匹配还需用到虚拟键盘该项目中使用的第三方插件为 ==》 simple-keyboard
npm 地址： https://www.npmjs.com/package/simple-keyboard