本人用的layui 2.x ,该版本的tree是直接支持搜索的,只需要开启
showSearch: true,甚至可以不用写搜索框
代码如下:
<script>
layui.use(['tree', 'layer'], function () {
var layer = layui.layer
, $ = layui.jquery
, tree = layui.tree;
tree({
elem: '#demo1' //指定元素
, target: '_blank' //是否新选项卡打开(比如节点返回href才有效)
, showSearch: true
, nodes: [ //节点
{
name: '常用文件夹'
, id: 1
, alias: 'changyong'
, children: [
{
name: '所有未读(设置跳转)'
, id: 11
, href: 'http://www.layui.com/'
, alias: 'weidu'
}, {
name: '置顶邮件'
, id: 12
}, {
name: '邮件标签邮件'
, id: 13
}
]
}, {
name: '我的邮箱'
, id: 2
, spread: true
, children: [
{
name: 'QQ邮箱'
, id: 21
, spread: true
, children: [
{
name: '收件箱'
, id: 211
, children: [
{
name: '所有未读'
, id: 2111
}, {
name: '置顶邮件'
, id: 2112
}, {
name: '标签邮件'
, id: 2113
}
]
}, {
name: '已发出的邮件'
, id: 212
}, {
name: '垃圾邮件'
, id: 213
}
]
}, {
name: '阿里云邮'
, id: 22
, children: [
{
name: '收件箱'
, id: 221
}, {
name: '已发出的邮件'
, id: 222
}, {
name: '垃圾邮件'
, id: 223
}
]
}
]
}
, {
name: '收藏夹'
, id: 3
, alias: 'changyong'
, children: [
{
name: '爱情动作片'
, id: 31
, alias: 'love'
}, {
name: '技术栈'
, id: 12
, children: [
{
name: '前端'
, id: 121
}
, {
name: '全端'
, id: 122
}
]
}
]
}
]
});
});
</script>
网页运行,会在树形菜单之上直接生成搜索框,完结。