前端实现模糊搜索

最新推荐文章于 2024-03-21 09:03:06 发布

小黑学IT

最新推荐文章于 2024-03-21 09:03:06 发布

阅读量2k

点赞数 1

分类专栏：前端学习文章标签：前端开发正则表达式 Vue 模糊搜索 v-model

本文链接：https://blog.csdn.net/qq_43804570/article/details/125873623

版权

前端学习专栏收录该内容

6 篇文章 1 订阅

订阅专栏

利用正则校验的方式在前端实现模糊搜索的功能

1，html

 <div class="searchDivInput">
        <input class="searchInput" type="text" placeholder="搜索分店"  v-model="storeKey">
        <img class="searchImg" :src="require('assets/img/webtherapy/search.png')" @click="findbranch()">
      </div>

2,JS

findbranch(){
        if(this.storeKey){
          let text = this.storeKey
          let reg = new RegExp(text) 
          //利用正则规则获取符合搜索条件的数据
          let list = this.branchStoreList.filter(item => reg.test(item.kkb104)) 
          //获取符合条件的数据
          this.branchStoreList=list
        }else{
        	//storeKey为空，则恢复全部数据显示
          this.branchStoreList=this.branchStoreListTemp
        }
      },