Question

How can I make jsTree hide non-matching elements, but still display the subnodes of matched elements?

As far as I know there are only two possibilities, that are both not suited for this case. You can either make jsTree hide no element at all by setting

show_only_matches: false

Or you can make it hide all non-matched elements by setting

 show_only_matches: true

But this option also hides the subnodes of matched nodes.

Answer 1

Finally, I found the solution, though it doesn’t look really nice, but it works.
Just pass a the found elements the the enableSubtree()-function, and it will show the nodes and take care of the correct appearance (i.e. that the dotted lines are shown and hidden correctly).

enableSubtree = function(elem) {
  elem.siblings("ul:first").find("li").show();
  return correctNode(elem.siblings("ul:first"));
};

correctNode = function(elem) {
  var child, children, last, _j, _len1, _results;
  last = elem.children("li").eq(-1);
  last.addClass("jstree-last");
  children = elem.children("li");
  console.log(children);
  _results = [];
  for (_j = 0, _len1 = children.length; _j < _len1; _j++) {
    child = children[_j];
    _results.push(correctNode($(child).children("ul:first")));
  }
  return _results;
};

A call of this function could look like this:

enableSubtree($(".jstree-search"))

since all found nodes receive the CSS class .jstree-search.