layui的
tree控件没有
搜索功能,在这里我们需要这个功能,要怎么操作呢?
1、html部分代码如下:
<div class="layui-col-xs2 layui-panel">
<div><input type="text" id="zf_keyword" placeholder="按关键词搜索"
class="layui-input"></div>
<div class="layui-tab-item layui-show" id="zf_tree"></div>
</div>
2、js代码部分如下:
var search = function(){
$("#zf_keyword").unbind('change').change(function () {
let that = this; //this;
let name = $(that).val().trim();
var elem = $("#zf_tree").find('.layui-tree-txt').css('color', ''); //搜索文本与设置默认颜色
if (!name) {
layer.alert("查无记录"); //无搜索值返回
}
elem.filter(':contains(' + name + ')').css('color', '#FFB800'); //搜索文本并设置标志颜色
elem.parents('.layui-tree-pack').prev().find('.layui-tree-iconClick').click(); //展开选项
})
}