Vue实现input框模糊搜索

2020年4月3日新增搜索高亮功能

在template里面：

                          <el-input
                              class="inline-input"
                              placeholder="请输入检验项目"
                              suffix-icon="el-icon-search"
                              v-model="project"  //主要是这个
                              size="mini"
                            ></el-input>
    
                           <li
                                class="content-box"
                                v-for="(list,index) in filterData"
                                :key="index"
                                :title="list.comboName"
                                :class="{active_jy:changeBlue == index}"
                                @click="changeColor(list,index)"
                              >
                                <span v-html="item.comboName"></span>
                              </li>

在data里面：

    data () {
    return {
    XMuData:[], //要进行模糊搜索的数组
    project:''  //进行搜索的关键词
    }

在computed里面：

    computed: {
      replaceArr () {
      const XMuData= JSON.parse(JSON.stringify(this.XMuData))
      const project = this.project
      // 匹配关键字正则
      const replaceReg = new RegExp(project, 'g')
      // 高亮替换v-html值
      const replaceString = `${project}`
      for (let i = 0; i < XMuData.length; i++) {
        // 开始替换
        XMuData[i].comboName= XMuData[i].comboName.replace(replaceReg, replaceString)
      }
      return XMuData
    },
        filterData () {
          const project = this.project
          if (project) {
            return this.replaceArr .filter(data => {
              return Object.keys(data).some(key => {
                return (
                  String(data[key])
                    .toLowerCase()
                    .indexOf(project) > -1
                )
              })
            })
          }
          return this.replaceArr 
        }
      },

效果如下：