写一段能实现微信小程序的模糊搜索功能的代码
时间: 2024-03-16 15:47:10 浏览: 57
微信小程序实现搜索功能
好的,以下是一个简单的微信小程序模糊搜索功能的代码:
1. 在 wxml 文件中,添加一个搜索框和一个列表:
```html
<!-- 搜索框 -->
<input bindinput="search" placeholder="请输入关键字" />
<!-- 列表 -->
<view>
<block wx:for="{{list}}" wx:key="{{index}}">
<view>{{item}}</view>
</block>
</view>
```
2. 在 js 文件中,定义一个列表和一个搜索函数:
```javascript
Page({
data: {
list: ['苹果', '香蕉', '橘子', '草莓', '蓝莓', '西瓜'],
searchList: [] // 搜索结果列表
},
search: function(e) {
var searchValue = e.detail.value.toLowerCase() // 获取搜索关键字
var list = this.data.list
var searchList = []
// 遍历列表,找到包含关键字的项目
for (var i = 0; i < list.length; i++) {
var item = list[i].toLowerCase()
if (item.indexOf(searchValue) >= 0) {
searchList.push(list[i])
}
}
// 更新搜索结果列表
this.setData({
searchList: searchList
})
}
})
```
3. 在 wxml 文件中,展示搜索结果列表:
```html
<!-- 搜索框 -->
<input bindinput="search" placeholder="请输入关键字" />
<!-- 搜索结果列表 -->
<view>
<block wx:if="{{searchList.length > 0}}">
<block wx:for="{{searchList}}" wx:key="{{index}}">
<view>{{item}}</view>
</block>
</block>
<block wx:else>
<view>暂无搜索结果</view>
</block>
</view>
<!-- 列表 -->
<view wx:if="{{searchList.length == 0}}">
<block wx:for="{{list}}" wx:key="{{index}}">
<view>{{item}}</view>
</block>
</view>
```
这个例子中,我们将搜索关键字转换为小写字母,然后遍历列表,找到包含关键字的项目。最后,我们将搜索结果保存在一个新的列表中,并更新小程序的数据。展示搜索结果的部分使用了 wx:if 和 wx:else 来判断有无搜索结果,并相应地展示页面。
阅读全文