根据输入框输入的内容模糊搜索列表项（不调后端接口）

根据输入框输入的内容模糊搜索列表项（不调接口）。

html：页面结构为一个输入框和一个列表。
js：

//模糊搜索

$("#input").keyup(function() {
    var inputValue = $(this).val();
    var arr=[];
    $.each(dataArr, function(index,val) {
        if (val.text.indexOf(inputValue.trim()) !== -1) { ==//关键句==
            arr.push(val);
        }
    });
    treeRenderFun(arr, '#list');
});

//树渲染

function treeRenderFun(ele, obj) {
    if (ele) {
       //权限树
       $.fn.zTree.init($(obj), settingPrivilege, ele);
    }
}

//树设置

var settingPrivilege = {
    view: {
        showIcon: false  //不显示图标
    },
    callback: {
        onCheck: zTreeOnCheck
    },
    check: {
        enable: true,
        chkStyle: "checkbox",
        autoCheckTrigger: true
    },
    data: {
        key: {
            name: "name" //要显示的内容对应的字段名
        },
        simpleData: {
            enable: true,
            idKey: "id",  //节点数据中保存唯一标识的属性名称
            // pIdKey: "parentId",  //节点数据中保存其父节点唯一标识的属性名称
            // rootPId: null  //根节点id
        }
    }
};

//点击勾选框触发事件

function zTreeOnCheck(event, treeId, treeNode) {
    // alert(treeNode.tId + ", " + treeNode.name + "," + treeNode.checked);
    // console.log(treeNode)
}

来源：CSDN

作者：蕙小薇

链接：https://blog.csdn.net/weixin_43011230/article/details/104461812