写一个微信小程序代码片段,实现从数组中搜索数据的功能
时间: 2024-02-06 09:12:33 浏览: 67
好的,以下是一个简单的微信小程序代码片段,实现从数组中搜索数据的功能:
1. 在页面的 wxml 文件中,添加一个输入框和一个按钮,用于输入搜索关键词和触发搜索:
```html
<view class="search">
<input class="search-input" placeholder="请输入搜索关键词" bindinput="onInput" />
<button class="search-btn" bindtap="onSearch">搜索</button>
</view>
```
2. 在页面的 js 文件中,定义一个数组并初始化,然后实现 onInput 和 onSearch 两个函数:
```javascript
Page({
data: {
searchList: ['apple', 'banana', 'orange', 'pear', 'watermelon'],
keyword: ''
},
onInput: function(event) {
this.setData({
keyword: event.detail.value
})
},
onSearch: function() {
var keyword = this.data.keyword
var searchList = this.data.searchList
var result = []
for (var i = 0; i < searchList.length; i++) {
if (searchList[i].indexOf(keyword) >= 0) {
result.push(searchList[i])
}
}
console.log('搜索结果:', result)
}
})
```
3. 在样式文件中添加搜索框样式:
```css
.search {
display: flex;
align-items: center;
justify-content: center;
margin: 16px 0;
}
.search-input {
flex: 1;
height: 32px;
border: 1px solid #ccc;
border-radius: 16px;
padding: 0 16px;
margin-right: 8px;
}
.search-btn {
width: 64px;
height: 32px;
background-color: #007aff;
border-radius: 16px;
color: #fff;
font-size: 14px;
line-height: 32px;
text-align: center;
}
```
这样,用户在输入框中输入关键词后,点击搜索按钮,就会在控制台输出搜索结果了。当然,你也可以将搜索结果显示在页面上。
阅读全文