溫馨提示×

JQuery Tree如何處理節(jié)點(diǎn)過濾搜索

小樊
82
2024-10-22 18:23:18
欄目: 編程語言

在 jQuery Tree 中，可以使用 filter 插件來處理節(jié)點(diǎn)的過濾搜索。以下是如何使用 filter 插件進(jìn)行節(jié)點(diǎn)過濾搜索的步驟：

  1. 首先，確保已經(jīng)在項(xiàng)目中引入了 jQuery 和 jQuery Tree 相關(guān)的庫文件?？梢酝ㄟ^以下方式引入：
<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>
  1. 創(chuàng)建一個(gè) HTML 元素，用于承載樹形結(jié)構(gòu)：
<div id="tree"></div>
  1. 初始化樹形結(jié)構(gòu)，并添加節(jié)點(diǎn)數(shù)據(jù)：
$(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" },
        ],
      },
    ],
  });
});
  1. 使用 filter 插件進(jìn)行節(jié)點(diǎn)過濾搜索：
$("#search").on("input", function () {
  var searchText = $(this).val().toLowerCase();
  $("#tree").tree("filter", searchText);
});

在 HTML 中添加一個(gè)搜索框元素：

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

現(xiàn)在，當(dāng)用戶在搜索框中輸入文本時(shí)，jQuery Tree 會根據(jù)輸入的文本過濾節(jié)點(diǎn)。只有與搜索文本匹配的節(jié)點(diǎn)才會顯示在樹形結(jié)構(gòu)中。

0 踩