jstree showing all nodes if search string didn't match any node

Question

I'm rendering jstree with following config

$('#deliverables').jstree({
    'core': {
        'data': data
    },
    'search': {
        'case_insensitive': true,
        'show_only_matches' : true
    },
    'plugins': ['search']
});

$('#deliverable_search').keyup(function(){
    $('#deliverables').jstree('search', $(this).val());
});

With this config, jstree showing only matched nodes if the search text has found atleast one node. But jstree showing all the nodes if the search text not matching with any node. I found this a bit strange. Am i missing something here?

https://jsfiddle.net/t9fe58rt/1/ link for your reference.

Answer 1

It's an intended bahavior, see: https://github.com/vakata/jstree/issues/1192#issuecomment-128042329

But you can attach an handler to the search event and if the result is empty act accordingly, eg. you can hide the all the tree nodes using hide_all method.

Code:

.on('search.jstree', function (nodes, str, res) {
    if (str.nodes.length===0) {
        $('#deliverables').jstree(true).hide_all();
    }
})

But don't forget to show them all before trigger a new search:

$('#deliverable_search').keyup(function(){
    $('#deliverables').jstree(true).show_all();
    $('#deliverables').jstree('search', $(this).val());
});

Demo: https://jsfiddle.net/xfn8aa19/

Answer 2

For me, the answer of Irvin Dominin was not enough

 $('#deliverable_search').keyup(function () {
        $('#deliverables').jstree(true).show_all();
        $('.jstree-node').show();
        $('#deliverables').jstree('search', $(this).val());
        $('.jstree-hidden').hide();
        $('a.jstree-search').parent('li').find('.jstree-hidden').show();
    });