PinyinMatch实现拼音匹配，分词、缩写、多音字匹配能力

参考https://www.npmjs.com/package/pinyin-match

npm install pinyin-match –save

const PinyinMatch = require(‘pinyin-match‘);
let test = ‘123曾经沧海难为水除却巫山不是云‘
PinyinMatch.match(test, ’23曾‘);// [1, 3]
 

案例1：

  <el-form-item label=”控制方案”>

      <el-select v-model=”lngcontrolplanid” :placeholder=”请输入” :filter-method=”selectFilter” filterable @focus=”onFocus”>
        <el-option
          v-for=”(item, index) in controlPlanList”
          :key=”item.lngcontrolplanid”
          :value-key=”item.lngcontrolplanid”
          :label=”item.strcontrolplanname”
          :value=”item.lngcontrolplanid”
        />
      </el-select>
    </el-form-item>

<script>

import pinyinMatch from ‘pinyin-match’

methods: {
//聚焦时显示全部数据
    onFocus() {
      this.controlPlanList = this.copyControlPlanList
    },
    selectFilter(val) {
      if (val) {
        this.controlPlanList = this.copyControlPlanList.filter((item) => {
          return PinyinMatch.match(item.strcontrolplanname, val) //(需要过滤的名称，输入的关键词)
        })
      } else {
        this.controlPlanList = this.copyControlPlanList
      }
    },
}

</script>
 
案例2

<el-form-item label=”出差地点” prop=”districtIds”>

<el-cascader
      ref=”areaNames”
      v-model=”disValue”
      :options=”districtAll”
      :props=”{
        label: ‘treedataname’,
        value: ‘treedataid’,
        children: ‘childList’
      }”
      :collapse-tags=”collapseTags”
      filterable
      :filter-method=”filterMethod”
    />

</el-form-item>
<script>

import pinyinMatch from ‘pinyin-match’

methods: {
    filterMethod(node, keyword) {
      return pinyinMatch.match(node.text, keyword)
    }
}

</script>