最终效果图:
index.wxml
<view class="container">
<view class="search_contaniner">
<view class="search_box">
<input type="text" placeholder="省/市级/区县级" value="{{search_cont}}" bindinput="handleInput"/>
<icon type="clear" size="32rpx" class="searhc_clear" wx:if="{{search_cont != ''}}" bindtap="handleClear"></icon>
</view>
</view>
</view>
<block wx:if="{{ search_cont == '' }}">
<view class="now_location container">
<view class="now_location_l">
<text>当前:</text>
<text>{{group_name}}</text>
</view>
<view class="now_location_r">
<!-- <text class="iconfont icon-dingwei"></text>
<text>重新定位</text> -->
</view>
</view>
<view class="container search_view_content">
<view class="search_view_item" wx:if="{{history_list.length > 0}}">
<view class="search_view_title">最近访问</view>
<view class="search_view_block_list">
<block wx:for="{{history_list}}" wx:key="index">
<view class="search_view_block" bindtap="checkGroupid" data-groupid="{{item.group_id}}" data-groupName="{{item.group_name}}">{{item.group_name}}</view>
</block>
</view>
</view>
<view class="search_view_item">
<view class="search_view_title">省级</view>
<view class="search_view_block_list">
<view class="search_view_block" bindtap="checkGroupid" data-groupid="61" data-groupName="陕西省">陕西省</view>
</view>
</view>
<view class="search_view_item">
<view class="search_view_title">市级</view>
<view class="search_view_block_list">
<block wx:for="{{list}}" wx:key="index">
<view class="search_view_block" bindtap="checkGroupid" data-groupid="{{item.group_id}}" data-groupName="{{item.group_name}}">{{item.group_name}}</view>
</block>
</view>
</view>
<block wx:for="{{list}}" wx:key="index">
<view class="search_view_item" wx:if="{{item.children.length > 0}}">
<view class="search_view_title">{{item.group_name}}</view>
<view class="search_view_ul">
<block wx:for="{{item.children}}" wx:key="index" wx:for-item="group">
<view class="search_view_li" bindtap="checkGroupid" data-groupid="{{group.group_id}}" data-groupName="{{group.group_name}}">{{group.group_name}}</view>
</block>
</view>
</view>
</block>
</view>
</block>
<block wx:else>
<view class="container search_content">
<block wx:if="{{search_list.length <= 0}}">
<view class="search_empty">抱歉,未找到相关位置,可尝试修改后重试</view>
</block>
<block wx:else>
<view class="search_ul">
<block wx:for="{{search_list}}" wx:key="index">
<view class="search_li">
<view class="iconfont icon-dingwei1 search_li_l"></view>
<view class="search_li_r" bindtap="checkGroupid" data-groupid="{{item.group_id}}" data-groupName="{{item.group_name1 + item.group_name}}">
<view>
<text class="setRed">{{item.group_name1}}</text>
<text>{{item.group_name}}</text>
</view>
<text class="iconfont icon-xiangyoujiantou"></text>
</view>
</view>
</block>
</view>
</block>
</view>
</block>
index.js
const app = new getApp();
Page({
data: {
group_name: app.globalData.group_info.group_name, // 当前所选区划名
search_cont: '', // 搜索关键词
list: [], // 所有市区及地区列表
history_list: [], // 最近访问 最多保存3个
search_list: [], // 搜索后显示的列表
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
// 获取是否存有历史数据
const history_data = wx.getStorageSync('history_data');
if(history_data){
this.setData({
history_list: JSON.parse(history_data)
})
}
// 获取所有区划
app.$http.get('get_list_groupAll', {}).then(res => {
this.setData({
list: res.content
})
}).catch(err => {
console.log(err)
});
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
this.setData({
group_name: app.globalData.group_info.group_name
})
},
// 点击选择地区
checkGroupid(e){
console.log(e)
const group_id = e.target.dataset.groupid;
const group_name = e.target.dataset.groupname;
app.globalData.group_info = {
group_id: group_id,
group_name: group_name
};
// 点击选择后将值记录至最近访问数组
// const
this.setHistoryData({group_id: group_id, group_name: group_name});
// 选择完毕后返回首页
wx.navigateBack({
delta: 1,
})
},
// 搜索框触发输入事件
handleInput(e){
this.searchGroup(e.detail.value);
this.setData({
search_cont: e.detail.value
})
},
// 搜索时触发,查询与搜索内容匹配的所有区划
searchGroup(keys){
const list = this.data.list;
const new_list = [];
list.forEach(item1 => {
if(keys == item1.group_name.slice(0, keys.length)){
new_list.push({group_id: item1.group_id, group_name: item1.group_name});
if(item1.children.length > 0){
item1.children.forEach(item2 => {
if(keys == item2.group_name.slice(0, keys.length)){
new_list.push({group_id: item2.group_id, group_name: item2.group_name});
}
})
}
}
})
this.setData({
search_list: this.setColorList(keys, new_list)
})
console.log(this.data.search_list)
},
// 点击清空搜索
handleClear(){
this.setData({
search_cont: '',
search_list: []
})
},
// 为搜索列表设置和关键词相等的字符设置颜色
setColorList(keys, list){
if(keys == '' || list.length < 1){
return [];
}
var new_list = [];
list.forEach((item, index) => {
let val = {};
val.group_id = item.group_id;
val.group_name1 = item.group_name.slice(0, keys.length);
val.group_name = item.group_name.replace(val.group_name1, '');
new_list[index] = val;
})
return new_list;
},
// 设置历史数据
setHistoryData(data={}){
let history_list = this.data.history_list;
if(JSON.stringify(data) != '{}'){
history_list.unshift(data);
}
// 去重
let uniqueArr = Array.from(new Set(history_list.map(JSON.stringify))).map(JSON.parse);
// 检测最近访问数量是否超过3条,如超过则删除最后一条
if(uniqueArr.length > 3){
uniqueArr.splice(3, 1)
}
// console.log('unique', uniqueArr);
this.setData({
history_list: uniqueArr
})
wx.setStorageSync('history_data', JSON.stringify(uniqueArr))
}
})
index.wxss
/* pages/search/index.wxss */
page{
background-color: #eee;
}
.search_box{
width: 100%;
height: 100%;
box-sizing: border-box;
background-color: #fff;
padding: 0 30rpx;
border-radius: 50rpx;
display: flex;
align-items: center;
justify-content: space-between;
}
.search_box input{
font-size: 28rpx;
/* margin-left: 30rpx; */
}
.now_location{
background-color: #fff;
display: flex;
justify-content: space-between;
border-radius: 15rpx;
}
.now_location text{
font-size: 28rpx;
color: #333;
}
.now_location_r .iconfont{
margin-right: 10rpx;
}
.search_view_content{
background-color: #fff;
margin-top: 20rpx;
}
.search_view_item{
margin-top: 30rpx;
}
.search_view_item:first-child{
margin-top: 0;
}
.search_view_title{
font-size: 28rpx;
font-weight: bold;
margin-bottom: 30rpx;
}
.search_view_block_list{
display: grid;
grid-template-columns: repeat(4, 23%);
grid-gap: 20rpx;
}
.search_view_block{
padding: 20rpx 0;
text-align: center;
font-size: 28rpx;
border: 1px solid #ccc;
border-radius: 15rpx;
/* width: 23%; */
}
/* .search_view_ul{} */
.search_view_li{
padding: 20rpx 0;
border-bottom: 1px solid #eee;
font-size: 28rpx;
}
.search_view_li:first-child{
padding-top: 0;
}
.search_content{
min-height: 85vh;
background-color: #fff;
}
.search_empty{
text-align: center;
font-size: 28rpx;
color: #333;
}
.search_li{
display: flex;
justify-content: space-between;
align-items: center;
}
.search_li_l{
margin-right: 16rpx;
}
.search_li_r{
flex: 2;
padding: 20rpx 0;
border-bottom: 1px solid #eee;
display: flex;
justify-content: space-between;
align-items: center;
}
.setRed{
color: red;
}