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 会根据输入的文本过滤节点。只有与搜索文本匹配的节点才会显示在树形结构中。