小程序 搜索框 实现模糊查询功能

话不多说 先上效果 ↓↓↓

思路:原始数据不变,新搜索数据作为实际展示数据.(太抽象了!!!其实就是酱紫看码加解释)

<!-- 小编用的是uview组件,不妨碍的.可以直接使用input @change事件就是@input事件 -->

<u-search placeholder="请输入园区名称" v-model="keyword" @change="search(keyword)"></u-search>

<!--循环体始终是searchList-->

<view v-for="(ele,index) in searchList">{{ele.name}}</view>

let initList = [{name:"体验园区"},{name:"暨南大学科技园"},{name:"天方园"}];//初始化数据始终保持不变
let searchList = null;//定义好一个空的变量

search(val) {
     searchList = [];
     initList.forEach((ele,index)=>{
         //转小写
         let name = ele.name.toLowerCase();
         let value = val.toLowerCase();
         
         if(name.includes(value)){
             searchList.push(ele)
         }
    })
},

OVER!
就这么简单!不清楚的地方请评论区咨询,谢谢包容~~