vant+vue实现远程搜索和关键字高亮功能

实现效果如图：

逻辑代码如下：

             //html代码
              <van-search 
               v-model="searchVal" 
               shape="round"
               show-action
               @cancel="onCancel"
               @search="onSearch"
               @input="onSearch"
               @focus="onFocus"
               placeholder="搜索快递公司" />
                 <div>
                    <ul class="search-list" v-for="(item, index) in searchList" :key="index">
                        <li  @click.stop="sureCompany(item.name)" v-html= item.value>
                            {{item.value}}
                        </li>
                     </ul>
                  </div>
           
         //执行函数
         onSearch(value){
          this.searchList=[]
           if (value) {
                this.listData.forEach(i=>{
                    //判断遍历是否包含输入字符
                    if(i.name.indexOf(value)!=-1){
                     var newHtml = `<span style="color: #105CFB">${value}</span>`;
                    //实现高亮效果
                     this.searchList.push(i)
                    //替换高亮字段
                     this.searchList.forEach(item => {
                        this.$set(i,'value',i.name)
                        item.value = item.value.replace(value,newHtml)
                      });
                    }
                })
           }
      }, 
      //获取搜索列表函数（这里是模拟数据）
       getListData() {
   	   this.listData=[{name:'申通快递'},{name:'申通快递啊啊啊啊啊'},{name:'圆通'},{name:'韵达'},           {name:'顺丰'},{name:'京东'}]
       },