微信小程序 简易搜索功能实现
先看效果图
挺简单的一个实现方法,导入外部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,
})
}
}
},
})`