微信小程序 检索功能的代码
时间: 2023-07-13 19:24:35 浏览: 52
以下是微信小程序中实现检索功能的示例代码:
1. 在wxml文件中添加一个搜索框和一个搜索按钮
```html
<view class="search-box">
<input class="search-input" type="text" placeholder="请输入关键字" bindinput="inputChange" />
<button class="search-btn" type="primary" bindtap="search">搜索</button>
</view>
```
2. 在js文件中,获取输入框的值,并根据值进行搜索
```javascript
Page({
data: {
searchValue: '', // 搜索框中的值
dataList: [], // 搜索结果列表
originList: [], // 原始数据列表
},
// 输入框内容改变时触发
inputChange(event) {
this.setData({
searchValue: event.detail.value,
})
},
// 点击搜索按钮时触发
search() {
const { originList, searchValue } = this.data
// 根据关键字搜索
const result = originList.filter(item => item.title.includes(searchValue))
this.setData({
dataList: result,
})
},
})
```
以上代码实现了一个简单的检索功能,当用户输入关键字并点击搜索按钮时,程序会根据关键字搜索对应的数据,并将搜索结果展示在页面上。需要注意的是,这里的搜索功能只是一个示例,实际使用时需要根据具体需求进行适当修改。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![.zip](https://img-home.csdnimg.cn/images/20210720083646.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)