Searching the tree and progressive disclosure of results

[Frank]

I've run into a snag as I dig into jsTree. As a test, I'm using the
demo page (index.html) that comes with the jsTree plugin.

What I want to do is to create a progressive disclosure search: as the
user types the query string into the text box, all but the root nodes
are hidden, and only matching parent & child nodes are revealed.

OR non-matching nodes are hidden, and parent folders that contain only
non-matching nodes close.

So far, this following bit was easy, it matches results by
highlighting them

$("#text").keyup(function () {
$("#demo").jstree("search",this.value);
});

Here's where I'm stuck:

1) One less elegant way of doing this is to close all the nodes before
I search. I'm not clear on the usage of .close_all before I start a
search. Can someone give me a syntax example?

2) A more elegant way, in terms of UI would be to progressively hide
child nodes and close parent nodes if there are no matching child
nodes

Part of the problem I guess is that a non-match is not an error,
merely an empty string.

3) Additionally, a puzzle I have is that using the back-space or
delete key, the query is re-sent, but the nodes from the previous
match don't close.

Can someone give me some feedback to clarify how I would approach
this?

Thanks

[vakata]

I have given this much thought, but unfortunately it is not that easy
- the problem is the special styling the last visible node in each
children collection should have.
It will make closing and opening really heavy to render correctly,
especially on large trees.

I guess a simple (and heavy) way to go would be to:
.bind("search.jstree", function (e, data) {
$(this).find("li").hide().removeClass("jstree-last");
data.rslt.nodes.parentsUntil(".jstree").andSelf().show()
.filter("ul").each(function () { $
(this).children("li:visible").eq(-1).addClass("jstree-last"); });
})
.bind("clear_search.jstree", function () {
$(this).find("li").css("display","");
$(this).jstree("clean_node", -1);
});

This seems to work fine, now all you need to do is call search on the
tree instance:

$("#tree-container").jstree("search", val);

You can bind to the search field onkeyup event ... also you might want
to timeout the search, to prevent heavy DOM operations while the user
is still rapidly typing.

I hope this helps!

Cheers,
Ivan

[vakata]

Also I forgot to include a check if the result is empty - catch that
and show a message for example, or even use the same code as in
clear_search, to show everything again (if this is what you want) -
otherwise an empty tree will be shown.

Cheers,
Ivan

On 8 Юли, 15:44, Frank <mr.z...@gmail.com> wrote:

[cftagger]

I have a similar case. I've got a (1-level-only) jstree with the
checkbox-plugin enabled. Could you provide me the "search" and
"clear_search" bind methods to exclude hinding the list items that
have the checkbox checked? So if one item is checked, it shoud stay
visible ignoring the search result. The above method also hides the
checked items.

[vakata]

Take a look at the adv_search plugin, and create your own copy, saving
the checked items.
Just give it a different name :) ("my_adv_search")

Kindest regards,
Ivan