Vue项目实现拼音首字母匹配分词、缩写、多音字匹配

效果图：

使用的第三方拼音包：

• pinyin-match(对包的开发者表示万分感谢)

步骤：

1.安装:

 cnpm install pinyin-match -s

2.引入:

import pingying from "pinyin-match";

3.html展示部分：

//query_data.keywords这就是个搜索关键字，不用过于纠结，requirements也就只是我请求到的数据
<div class="screen-box">
    <input
      type="text"
      placeholder="在需求大厅中搜索"
      v-model="query_data.keywords"
      :onchange="input_change(query_data.keywords)"
      />
    <i></i>
    <span @click="searchRequirement">搜索</span>
</div>
<div style="width: 220px;position: absolute;background-color: #fff;z-index: 20;padding: 10px;right: 76px;top: 43px;border-radius: 5px;height: 300px;overflow: hidden; overflow-y: inherit;border: 1px solid #ccc;">
    <ul>
        <li
          style="border-bottom: 1px solid #ccc;cursor: pointer;"
          v-for="(item,index) in requirements"
          :key="index"
          @click="query_data.keywords=item.requirement_name"
          v-show="item.show"
        >
        {{item.requirement_name}}
        </li>
    </ul>
</div>

因为只是为了例子所以就直接在以前项目中做了，所以这个样式呀什么的都不好看，主要提供一个例子。
4.input_change中的代码：

input_change(val) {
  const PinyinMatch = require('pinyin-match');
  //当在input中输入搜索关键字的时候，将本地的需求列表数据进行遍历，通过拼音包的方法判断需求的名称是否符合要求，并控制其显隐。
  if(val){
    this.requirements_py.forEach((i)=>{
      var m  = PinyinMatch.match(i.requirement_name,val)
      if(m){
        i.show="show"
      }else {
        i.show=null
      }
    })
  }
}

行，完事了。这样就实现了如预览图一样的效果了，当然这个例子确实很粗糙，就是记录一下怎么使用pinyin-match这个语音包来实现拼音首字母匹配分词、缩写、多音字匹配这么个功能。
　　在实际应用的时候还是得灵活的变动下。
　　希望能帮上大家。