前端实现模糊搜索

最新推荐文章于 2025-09-24 08:44:09 发布

原创最新推荐文章于 2025-09-24 08:44:09 发布 · 2.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue

前端学习专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何使用正则表达式在HTML输入框中实现模糊搜索功能，通过实例演示如何在Vue组件中筛选分店数据，当用户输入时匹配并显示相关结果。

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

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
        }
      },