如果搜索字符串与任何节点不匹配，jstree将显示所有节点

I'm rendering jstree with following config

我正在使用以下配置渲染jstree

$('#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?

使用此配置,如果搜索文本找到至少一个节点,则jstree仅显示匹配的节点。但是如果搜索文本与任何节点不匹配,jstree会显示所有节点。我发现这有点奇怪。我错过了什么吗?

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

https://jsfiddle.net/t9fe58rt/1/链接供您参考。

2 个解决方案

#1

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

这是一个预期的行为,请参阅: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.

但是你可以将一个处理程序附加到搜索事件中,如果结果是空的,则相应地进行操作,例如。您可以使用hide_all方法隐藏所有树节点。

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/

#2

For me, the answer of Irvin Dominin was not enough

对我来说,Irvin Dominin的回答还不够

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

#1