先看效果圖
挺簡單的一個實現方法,匯入外部js資料,將資料通過radio-group展示出來,根據資料裡的status屬性判斷顯不顯示該項.
在搜尋框內實時讀取輸入的資料,去除空格後將資料跟js裡的name屬性模糊對比,如果不一致就通過status屬性隱藏該項
大概是這樣一個思路,最下面有程式碼片段
wxml
<view> <view class="search"> <input placeholder=" 請輸入國家名稱" type="string" bindinput="searchInput" maxlength="15" /> </view> <view class="picker-view"> <radio-group bindchange="radioAear"> <label class="pick-lable" wx:for-items="{{provinces}}" wx:key="index" wx:if="{{item.status=='1'?true:false}}"> <view class="pick-lable-view"> <text bindtap="goIndex" data-index="{{index}}">{{item.name}}</text> <radio value="{{item.name}}" /> </view> <view class="line_short" /> </label> </radio-group> </view> </view>
wxss
`page{
width:100%;
height:100%;
background-color: #000;
}
.pick-lable{
width: 100%;
}
.search{
width: 82%;
height: 80rpx;
border: 2rpx solid #ffffff;
border-radius: 15rpx;
margin: 60rpx auto;
color: #4A5269;
display: flex;
}
.search input{
width: 80%;
margin-left:32rpx;
font-size: 28rpx;
margin-top:2%;
}
.picker-view{
margin-top: 0rpx;
width: 100%;
}
.pick-lable-view{
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
width: 82%;
margin: 0 auto;
color:#CCCCCC;
}
.line_short{
margin: 20rpx 0 40rpx 9%;
height: 0;
border: 2rpx solid #4a5269;
}`
js
`var address = require("./country.js")
Page({
data: {
address: "", //匯入的類
provinces: [], //儲存資料
},
onLoad() {
this.setData({
provinces: address.countrys,
})
},
//選擇後的事件
radioAear(e) {
var value = e.detail.value
this.setData({
}, () => {
console.log(value)
})
},
//搜尋功能實現
searchInput(e) {
var searchtext = e.detail.value.replace(/\s+/g, '')
// var searchtext = e.detail.value.replace([\u4e00-\u9fa5])
if (searchtext != "") {
//迴圈查詢陣列中的name欄位
for (var index in address.countrys) {
var num = address.countrys[index].name.indexOf(searchtext);
let temp = 'provinces[' + index + '].status';
//判斷符不符合,不符合的隱藏
if (num !== -1) {
this.setData({
[temp]: 1,
})
}else{
this.setData({
[temp]: 0,
})
}
}
} else {
//搜尋框為空時所有都顯示
for (var index in address.countrys) {
let temp = 'provinces[' + index + '].status';
this.setData({
[temp]: 1,
})
}
}
},
})`
程式碼片段: https://developers.weixin.qq.com/s/S5bW6Qm97HsL