纯前端实现拼音搜索

<FormItem label="车牌号："
                    prop="licenseId">
            <el-input class="car-number"
                      placeholder='请输入车牌号'
                      v-model="userInfo.licenseId"
                      size="small"
                      style="width: 220px">
              <el-select style="width:90px"
                         slot="prepend"
                         clearable
                         size="small"
                         v-model="formData.provinceValue"
                         filterable//是否可搜索
                         no-data-text="无匹配数据"
                         :filter-method="carpinyinMatch"//自定义搜索方法
                         >
                <el-option v-for="item in carCard"
                           :key="item.plateCod"
                           :label="item.plateName"
                           :value="item.plateName">
                  {{ item.plateName }}
                </el-option>
              </el-select>

            </el-input>
          </FormItem>
          
          //---------------------//

//安装拼音筛选插件:
npm install pinyin-match

//carCardInit 全部省份数组
//carCard 筛选后的数组
carpinyinMatch (val) {
      const PinyinMatch = require('pinyin-match')
      if (val) {
        let copyCarCard = JSON.parse(JSON.stringify(this.carCardInit))//深拷贝
        let result = [] //粗存符合输入拼音的子项
        copyCarCard.map((v, i) => {
          let m = PinyinMatch.match(v.plateName, val)
          if (m) {
            result.push(v) //取出符合输入拼音的子项
          }
        })
        this.carCard = result //改变select最新选项
      } else {
        this.carCard = this.carCardInit //输入空格时的处理
      }
    },

效果：



用于多字的搜索