最近在做一个小程序的页面，搜索框困扰了我很久，今天终于把搜索框给做了出来，记录一下过程
我主要使用的就是wx的if，当我输入框用户点击的时候，我前面的显示界面添加上false属性，然后我搜索页面显示出true的属性，至于模糊搜索，我是直接使用的js的匹配，话不多说，直接看成果和代码
代码
<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>
js
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.dataArray console.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 () { } })
.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; }
