javascriptjstreejstree-search

jstree-grid issue when attempting to show only matches


I'm using jstree, the built-in search plugin, and jstree-grid plugin. What I'm trying to do is use the show_only_matches option for the search so only matching nodes are shown, the rest are hidden. This is where my issue comes in.

I'm using the jstree-grid plugin and even though the search works fine, the grid malfunctions. It doesn't hide the extra row information like you would expect. For example, there is a root node, Root, and it has 3 children; child1, child2, child3, if you search for child3, Root is opened and only child3 is displayed. However, the grid values for child1 and child2 are still displayed.

The image link below is an example of this. Searching for test2 displays only the test2 children, but there are 2 tests under each of those schools and the hidden test information is still being displayed.

https://i.sstatic.net/84Q65.png


Solution

  • Here is what I am now using to show/hide the appropriate grid values, all it is is changing up the search function a bit.

        $('#treeSearch').keyup(function () {
            if(to) { clearTimeout(to); }
            to = setTimeout(function () {
                var v = $('#treeSearch').val();
                $('#jstree').jstree(true).search(v);
    
                //hide/show grid values for nodes affected by searching
                var hidden = $('ul li:hidden');
                var visible = $('ul li:visible');
    
                $.each(hidden, function(i){
                    $('div[id*=' + hidden[i].id + ']').hide();
                });
    
                $.each(visible, function(i){
                    $('div[id*=' + visible[i].id + ']').show();
                });
    
            }, 500);
        });