微信小程序搜索框实现模糊搜索（带模拟数据，js,wxml,wxss齐全）

最近在做一个小程序的页面，搜索框困扰了我很久，今天终于把搜索框给做了出来，记录一下过程

我主要使用的就是wx的if，当我输入框用户点击的时候，我前面的显示界面添加上false属性，然后我搜索页面显示出true的属性，至于模糊搜索，我是直接使用的js的匹配，话不多说，直接看成果和代码

在这里插入图片描述

代码

wxml

<view style="display: flex; align-items: center;background-color: rgb(71, 189, 254); margin-top: 200rpx;"><input placeholder="请输入关键词" focus="{{inputFocus}}" bindfocus="onFocus" bindblur="onBlur" style="border: 1px solid #ccc; padding: 10rpx; border-radius: 10rpx; flex: 1;background-color: rgb(255, 255, 255);" /><button wx:if="{{showSearch}}"bindtap="quxiao"style="margin-left: 10rpx; padding: 5rpx 10rpx;  color: #fff; border-radius: 5rpx; width: 140rpx;background-color: rgb(71, 189, 254);">取消</button></view><view class="another-container"><view wx:if="{{searchResult.length > 0}}"><!-- 显示搜索结果列表 --><view class="search-list"><view wx:if="{{showSearch && searchResult.length > 0}}"><!-- 显示搜索结果列表 --><view class="search-list"><view class="article-item" wx:for="{{searchResult}}" wx:key="index" bindtap="onArticleTap" data-articleid="{{item.articleid}}"><image class="article-image" src="{{item.image}}"></image><view class="article-content"><text class="article-title">{{item.title}}</text><view class="article-time">{{item.releasetime}}</view></view></view></view></view></view></view><view wx:else><!-- 当搜索结果为空时显示暂无搜索结果 --><view class="no-result">暂无搜索结果</view></view></view>

Page({/*** 页面的初始数据*/data: {showSearch: false,inputFocus: false,dataArray:[{"articleid": "3490400c-9988-4b57-8f8a-92124cb9bef3","title": "喝酒","releasetime": "2024-2-17","image": "https://pic.imgdb.cn/item/65d04d2a9f345e8d0321731d.jpg","text": "嘿嘿","teacherid": null},{"articleid": "40b3e53f-d2c6-4f11-b1f7-965f6ce54800","title": "检查作业呜呜呜","releasetime": "2024-2-17","image": "https://pic.imgdb.cn/item/65d0312b9f345e8d03cb438a.jpg","text": "好难","teacherid": null},{"articleid": "db100597-07b5-4470-9ed5-8e69b258dd48","title": "笨蛋去上学了不开心","releasetime": "2024-2-17","image": "https://pic.imgdb.cn/item/65ceff799f345e8d03690b4b.jpg","text": null,"teacherid": null},{"articleid": "1b275828-aea7-46f9-9912-0668772d0cd5","title": "送的手链好好看❤","releasetime": "2024-2-16","image": "https://pic.imgdb.cn/item/65ceff939f345e8d03695d7d.jpg","text": null,"teacherid": null},{"articleid": "9f9edd79-92d0-4758-bdd0-c5a333c653fe","title": "在家玩switch！","releasetime": "2024-2-16","image": "https://pic.imgdb.cn/item/65ceffa99f345e8d0369a7b0.jpg","text": "","teacherid": null},{"articleid": "1aac74b2-67a6-40e7-8967-b665f64df05c","title": "在家也会有彩虹！","releasetime": "2024-2-14","image": "https://pic.imgdb.cn/item/65ceffb69f345e8d0369d156.jpg","text": "","teacherid": null},{"articleid": "eda6872f-8154-47d4-98b4-38057e35d41c","title": "2是去看烟花","releasetime": "2024-2-13","image": "https://pic.imgdb.cn/item/65ceff799f345e8d03690a92.jpg","text": "","teacherid": null}]},onFocus: function() {this.setData({inputFocus: true,showSearch: true,isshow:false});},onBlur: function(e) {this.setData({isshow:false,showSearch: true,searchResult:null,Searchtxt:e.detail.value})var txt=this.data.Searchtxt;var dataArray=this.data.dataArrayconsole.log("开始搜索"+txt);const searchResult = this.fuzzySearch(dataArray, txt);console.log(searchResult);this.setData({searchResult:searchResult})},quxiao: function() {this.setData({showSearch: false,})},fuzzySearch(arr, searchText) {const filteredArray = arr.filter(item => {const titleMatch = item.title.toLowerCase().includes(searchText.toLowerCase());const timeMatch = item.releasetime.toLowerCase().includes(searchText.toLowerCase());const textMatch = item.text && item.text.toLowerCase().includes(searchText.toLowerCase());return titleMatch || timeMatch || textMatch;});return filteredArray;},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

wxss

.search-list{margin-top: 20rpx;
}
.article-list {width: 80%;
}.article-item {margin-bottom: 20rpx;padding: 20rpx;background-color: #fff;border-radius: 10rpx;box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);display: flex;
}.article-item:last-child {margin-bottom: 0;
}.article-image {width: 120rpx;height: 120rpx;margin-right: 20rpx;border-radius: 10rpx;
}.article-content {flex: 1;
}.article-title {font-size: 32rpx;font-weight: bold;margin-top: 10rpx;
}.article-time {color: #999;font-size: 24rpx;margin-top: 10rpx;
}.article-text {font-size: 28rpx;margin-top: 10rpx;
}
.no-result {text-align: center;font-size: 32rpx;color: #999;margin-top: 20rpx;
}