功能描述:在搜索框中输入内容,在渲染出的网络数据中取出带输入关键字的内容,单独显示
功能实现:
1.index.wxml:循环一个数组
<view class='preson'>
<input bindinput="personTap" type="text" placeholder-style="color:#999;font-size:12px;text-align:center;" placeholder="搜索联系人" />
</view>
<block wx:for="{{phonename}}">
<view class='numbername'>
<text>{{item.name}}</text>
<text>{{item.phone}}</text>
</view>
</block>
2.index.wxss:样式
.preson {
width: 80%;
height: 80rpx;
border: 1px solid #ccc;
padding-left: 20px;
padding-top: 20rpx;
margin: 30px;
}
.numbername {
height: 100rpx;
border-bottom: 1px solid #ccc;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding-right: 40rpx;
}
3.index.js:逻辑代码
data: {
// 加载网络数据放在此数组中,本例中放入的是死数据,仅供参考
contacts: [{
id: 0,
name: '熙妈妈',
phone: 18238001932
},
{
id: 1,
name: '熙爸爸',
phone: 15503869486
}
],
phonename: [],//此处的数组 是页面中循环的数组
},
onLoad: function(options) {
var that = this;
// 获取网络数据 成功后 赋值给phonename 此处单纯的赋值!!!
that.setData({
phonename: that.data.contacts
})
},
// 搜索联系人
personTap: function(event) {
let value = event.detail.value; //获取input框中的内容
let contacts = this.data.contacts; //得到网络数据存放的数组
let array = []; //新定义一个数组
for (var i = 0; i < contacts.length; i++) { //循环网络数据存放数组
if (contacts[i].name.indexOf(value) != -1) { //判断输入的内容在这个数组中的.name.indexOf()是否等于-1
array.push(contacts[i]) //不等于-1就添加到新数组
}
}
this.setData({ //跳出循环后,新数组赋值给页面循环的数组,实现搜索功能
phonename: array
})
},
注:出错请复现具体错误!