最近在做一个小程序的页面，搜索框困扰了我很久，今天终于把搜索框给做了出来，记录一下过程
我主要使用的就是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>
js文章来源：https://www.toymoban.com/news/detail-829400.html
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 () {
}
})
wxss文章来源地址https://www.toymoban.com/news/detail-829400.html
.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;
}
到了这里，关于微信小程序 搜索框实现模糊搜索（带模拟数据，js,wxml,wxss齐全）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
