JQuery Tree如何处理节点过滤搜索

在 jQuery Tree 中，可以使用 filter 插件来处理节点的过滤搜索。以下是如何使用 filter 插件进行节点过滤搜索的步骤：

1. 首先，确保已经在项目中引入了 jQuery 和 jQuery Tree 相关的库文件。可以通过以下方式引入：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jQueryTree/1.0.0/jquery.tree.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jQueryTree/1.0.0/jquery.tree.min.js"></script> 

2. 创建一个 HTML 元素，用于承载树形结构：

<div id="tree"></div> 

3. 初始化树形结构，并添加节点数据：

$(document).ready(function () {   $("#tree").tree({     data: [       {         label: "Node 1",         children: [           { label: "Node 1.1" },           { label: "Node 1.2" },         ],       },       {         label: "Node 2",         children: [           { label: "Node 2.1" },           { label: "Node 2.2" },         ],       },     ],   }); }); 

4. 使用 filter 插件进行节点过滤搜索：

$("#search").on("input", function () {   var searchText = $(this).val().toLowerCase();   $("#tree").tree("filter", searchText); }); 

在 HTML 中添加一个搜索框元素：

<input type="text" id="search" placeholder="Search nodes..."> 

现在，当用户在搜索框中输入文本时，jQuery Tree 会根据输入的文本过滤节点。只有与搜索文本匹配的节点才会显示在树形结构中。