How to properly use checkboxes and searchable plugin in JavaScript using ul/li HTML tag?

Im trying to use jsTree library with checkbox and search pluging at the same time. I have the elements in ul and li tags but checkbox plugin is the one that works. Can anybody help me with an example using search and checkbox plugins? Or another library that can use to achieve this function?

This is the function I use.

    $(document).ready(function(){
    $("#search_element").keyup(function() {

    var searchString = $(this).val();
    console.log(searchString);
    $('#jstree').jstree('search', searchString);
    });

    $("#treeviewer").jstree({

        "checkbox" : {
        "keep_selected_style" : false
        },
        "search": {

        "case_insensitive": true,
        "show_only_matches" : true
        },
        "plugins" : [ "checkbox",
                      "search"]
    });
});

I have my treeview in this way:

<ul class="tree">
    <li>First Child
        <ul>
            <li>First Child
                <ul>
                    <li>First Child</li>
                    <li>Second Child</li>
                    <li>Third Child</li>
                    <li>Fourth Child</li>
                </ul>
            </li>
            <li>Second Child</li>
            <li>Third Child</li>
            <li>Fourth Child</li>
        </ul>
    </li>
    <li>Second Child</li>
    <li>Third Child</li>
    <li>Fourth Child</li>
</ul>

All the list into a div tag.

I tried to hidding the elements as the next link enter link description here But when a select all the filter data, it selects the whole info.

Any help will be appreaciated