微信小程序 搜索框实现模糊搜索（带模拟数据，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>

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 () {
    
  }
})

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