微信小程序 搜索框实现模糊搜索（带模拟数据，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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

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 () {
    
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54