索引页制作要点
– 设置父页数据
– 模糊搜索关键字
– 数据重组
– 多重循环
– 页面的值获取

效果

关键代码

//设置父页数据
var pages = getCurrentPages();
var prevPage = pages[pages.length - 2];
prevPage.setData({
    affiliation: e.currentTarget.dataset
})

//模糊搜索关键字-数据重组 ps: 后面连接有相关文章
var serachResult = [];
var result = attrdata.filter(function (val) {

    var res = val.children.filter(function(v){
        if (v.text.indexOf(keyword) >= 0) {
            return true;
        } 
    })
    if(res.length > 0) {
        var test = { text: val.text, value: val.value, children: res }
        serachResult.push(test)
    }

});

完整代码

page/index/index.js

Page({

    /**
     * 页面的初始数据
     */
    data: {
        affiliation: []
    },

    //事件处理
    affiliation: function () {
        wx.navigateTo({
            url: '../indexlist/index',
        })
    }

})

page/index/index.wxml

<input  name="username" placeholder='索引页选择' bindtap="affiliation" value="{{affiliation.text}}" disabled="true" />

pages/indexlist/index.js

var attrdata = [
    { text: "A", value: "1", children: [{ text: "爱的发的", value: "2" }, { text: "阿百川", value: "2" }] },
    { text: "B", value: "4", children: [{ text: "霸道师傅", value: "3" }, { text: "八十多分", value: "5" }, { text: '八代收代付', value: '5' }] },
];
Page({
    /**
     * 页面的初始数据
     */
    data: {
        mydata: attrdata
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {

    },
    /**
     * 页面模糊搜索
     */
    serach: function (e) {
        var serachResult = [];
        var keyword = e.detail.value;

        console.log(keyword);
        var result = attrdata.filter(function (val) {

            var res = val.children.filter(function(v){
                if (v.text.indexOf(keyword) >= 0) {
                    return true;
                } 
            })
            if(res.length > 0) {
                var test = { text: val.text, value: val.value, children: res }
                serachResult.push(test)
            }

        });

        this.setData({
            mydata: serachResult
        })

    },
    selectUnit: function(e) {
        // console.log(e.currentTarget.dataset)
        var pages = getCurrentPages();
        var prevPage = pages[pages.length - 2];
        prevPage.setData({
            affiliation: e.currentTarget.dataset
        })
        wx.navigateBack({})
    }
})

pages/indexlist/index.wxss

page {
    background-color: #efeff4;
}
.ks-view-top {
    position: fixed;
    top: 0;
    left: 0px;
    right: 0;
    height: 80rpx;
    background: #ffffff;
    border-top: 2rpx solid #c8c7cc;
    border-bottom: 2rpx solid #c8c7cc;
    z-index: 9999;
}
.ks-view-top input {
    height: 80rpx;
    width: 100%;
    text-align: center;
}
.ks-none-value {
    margin-top: 80rpx;
}
.ks-list-group {
    padding-left: 20rpx;
}
.ks-cell {
    height: 80rpx;
    line-height: 80rpx;
    padding-left: 40rpx;
    background-color: #ffffff;
    border-bottom: 2rpx solid #c8c7cc;
}

pages/indexlist/index.wxml

<view class="ks-view-top">
    <input bindinput="serach" type="text" placeholder="搜索" confirm-type="search"></input>
</view>
<radio-group>
<view class="ks-none-value">
    <view class="ks-list-group">#</view>
    <view class="ks-cell">
        <label  bindtap="selectUnit" data-val="0" data-text="其它"><radio />其它</label>
    </view>
</view>

<view class="ks-list">
    <view wx:for="{{mydata}}" wx:for-item="sub" wx:key="*this">
        <view class="ks-list-group">{{sub.text}}</view>
        <view class="ks-cell" wx:for="{{sub.children}}" wx:key="*this">
            <label bindtap="selectUnit" data-val="{{item.value}}" data-text="{{item.text}}"><radio /> {{item.text}}</label>
        </view>
    </view>
</view>
</radio-group>

扩展操作

如果数据为JSON模糊搜索

var serachResult = {};
var keyword = e.detail.value;
for (var p in attrdata) {
    var res = attrdata[p].filter(function(val) {
        if (val.title.indexOf(keyword) >= 0) {
            return true;
        }
    })
    if (res.length > 0) {
        serachResult[p] = res
    }
}
this.setData({
    mydata: serachResult
})

相关资料

js前端实现模糊查询
javascript中操作json的增、删、改、查
mui索引页-想要达到的效果
Array 对象
城市-区县定位选择模块-参考源码
JSON遍历