--- title: Filter layout: page js: examples/filter.js css: example.css ---

Example 14 - filter

javascript

{% highlight js %} const $tree = $("#tree1"); let foundMatch = false; $tree.tree({ autoOpen: false, data: ExampleData.exampleData, useContextMenu: false, onCreateLi: (node, $el) => { if (foundMatch && !node.openForMatch && !node.parent.matches) { $el.addClass("hidden-node"); } if (node.matches) { $el.addClass("highlight-node"); } }, }); $("#search").on("click", () => { const searchTerm = $("#search-term").val().toLowerCase(); if (!searchTerm) { foundMatch = false; tree.iterate((node) => { node['openForMatch'] = false; node["matches"] = false; return true; }); $tree.tree("refresh"); return; } const tree = $tree.tree("getTree"); foundMatch = false; tree.iterate((node) => { const matches = node.name.toLowerCase().includes(searchTerm); node["openForMatch"] = matches; node["matches"] = matches; if (matches) { foundMatch = true; if (node.isFolder()) { node.is_open = true; } let parent = node.parent; while (parent) { parent["openForMatch"] = true; parent.is_open = true; parent = parent.parent; } } return true; }); $tree.tree("refresh"); }); {% endhighlight %}

html

{% highlight html %}
{% endhighlight %}

css

{% highlight css %} .hidden-node { display: none; } .highlight-node > .jqtree-element > .jqtree-title { font-weight: bold; } #search-term { margin-bottom: 16px; margin-right: 8px; } {% endhighlight %}