微信小程序 简易搜索功能实现

先看效果图

挺简单的一个实现方法,导入外部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