CODEWITHSUNDEEP
javascriptjqueryjstreejstree-search
Murali Mopuru
Murali Mopuru

Reputation: 6570

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

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.

Upvotes: 15

Views: 7742

Answers (2)

Yitzhak Weinberg
Yitzhak Weinberg

Reputation: 2562

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();
    });

Upvotes: 2

Irvin Dominin
Irvin Dominin

Reputation: 30993

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/

Upvotes: 21

Related Questions