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

简介: 微信小程序 搜索框实现模糊搜索(带模拟数据,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;
}
相关文章
|
13天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的停车场微信小程序附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的停车场微信小程序附带文章和源代码部署视频讲解等
22 6
|
13天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的宠物医院微信小程序附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的宠物医院微信小程序附带文章和源代码部署视频讲解等
23 3
|
2天前
|
数据采集 存储 JavaScript
深入Node.js:实现网易云音乐数据自动化抓取
深入Node.js:实现网易云音乐数据自动化抓取
|
4天前
|
JavaScript 前端开发 Android开发
kotlin开发 webview如何在收到JS调用后,native返回数据给到JS
这段内容描述了在Hybrid App开发中,使用Kotlin的Compose构建的Web视图(WebView)如何通过JsBridge实现JavaScript与原生代码的交互
|
13天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的校园导航微信小程序附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的校园导航微信小程序附带文章和源代码部署视频讲解等
22 6
|
13天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的“狮子狗”二手交易微信小程序附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的“狮子狗”二手交易微信小程序附带文章和源代码部署视频讲解等
25 7
|
13天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的毕业生就业管理微信小程序附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的毕业生就业管理微信小程序附带文章和源代码部署视频讲解等
8 0
|
14天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的传统戏曲推广微信小程序附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的传统戏曲推广微信小程序附带文章和源代码部署视频讲解等
13 0
|
26天前
|
小程序 API 数据安全/隐私保护
微信小程序开发中的一些常用标签
这些标签是微信小程序开发中的基础,开发者可以根据需要组合使用这些标签来构建小程序的界面。每个标签都有其属性和事件,可以通过属性来调整组件的样式和行为,通过事件来响应用户的操作。
45 5
|
14天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的外卖小程序的研究与开发的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的外卖小程序的研究与开发的详细设计和实现
17 0

热门文章

最新文章