要在jQuery Tree中實現節點搜索,您可以使用以下步驟:
首先,確保您已經在您的項目中包含了jQuery和jQuery Tree插件。如果沒有,請訪問以下網站下載并包含它們:
在HTML文件中創建一個用于存放樹形結構數據的容器:
<div id="tree"></div>
<input type="text" id="searchInput" placeholder="搜索節點...">
$(document).ready(function() {
$("#tree").tree({
data: [
// 您的樹形結構數據,例如:
{
label: "節點1",
children: [
{ label: "子節點1-1" },
{ label: "子節點1-2" }
]
},
{
label: "節點2",
children: [
{ label: "子節點2-1" },
{ label: "子節點2-2" }
]
}
],
// 其他可選參數...
});
});
$("#searchInput").on("keyup", function() {
let searchText = $(this).val().toLowerCase();
$("#tree").tree("search", searchText);
});
現在,當您在搜索框中輸入文本時,jQuery Tree插件將根據輸入的文本過濾樹中的節點。請注意,這個搜索功能是區分大小寫的。如果您希望實現不區分大小寫的搜索,可以在搜索之前將輸入的文本轉換為小寫:
searchText = searchText.toLowerCase();