Show only matched node(s) in jsTree

Question

I have a common code based on class selector for jsTree plugin. I used jsTree in another cshtml page. I want to display only matched node from search in jsTree. I already set the option to show only matched nodes but it is not working.

Can any one please help me?

$(".jsTree").each(function (index, element) {
    if ($(element).data("isProcessed") != "1" && $(element).attr("isProcessed") != 1) {
        $(element).data("isProcessed", "1");
        $(element).attr("isProcessed", "1");
        $(this).jstree({
            core:
            {
                check_callback: true
            },
            checkbox:
            {
                keep_selected_style: true,
                three_state: ($(element).data("three-state") == "false" ? false : true)
            },
            search:
            {
                case_insensitive: true,
                show_only_matches: true
            },
            plugins: ["checkbox", "search"]
        }).on('search.jstree', function (nodes, str, res) {
            if (str.nodes.length === 0) {
                $(element).jstree(true).hide_all();
            }
        });
    }
});

$(document).ready(function () {
    $('#jsroletree_search').keyup(function () {
        $('#jsRoleTree').jstree(true).show_all();
        $('#jsRoleTree').jstree('search', $(this).val());
    });
});

Answer 1

I'm facing the same issue in common code sometimes jsTree not allowing one more instance on the same page.

Can you please replace your code

$(document).ready(function () {
    $('#jsroletree_search').keyup(function () {
        $('#jsRoleTree').jstree(true).show_all();
        $('#jsRoleTree').jstree('search', $(this).val());
    });
});

To

$(document).ready(function () {
    $('#jsroletree_search').keyup(function () {
    $('#jsRoleTree').jstree(true).show_all();
    $('#jsRoleTree').jstree('search', $(this).val());
    $('#jsRoleTree .jstree-hidden').hide();    
  });
});