JSTree Search with Ajax Call / Lazy Loading

[Nirav Kamani]

I am using JSTree in my application.

I am unable to implement Search functionality with ajax call.

Here i am putting what i tried.

$(document).ready(function () {
    $("#jstree_demo_div").jstree({
        "core": {
            "data": {
                "url": "Tree/Index",
                "data": function (node) {
                    return { "id": node.id };
                }
            }
        },
        "search": {
            "url": "Tree/Index",
            "data": function (node) {
                return { "id": node };
            }
        },
        "plugins": ["search"],
    });

    $('#searchTree').on('click', function (event) {
        $("#jstree_demo_div").jstree('search', '1');
    });
});

Whenever i press button it comes to event and after that call is not made to server.

What i want is to make ajax call on search and completely recreate treeview as per search.

I am unable to understand how can i do this?

I already checked following link.

JSTree API Documentation

jsTree search with Ajax/JSON not calling URL

In above stackoverflow question i am unable to understand what is "json_data" and why and how it is used?

There is not a single example in https://www.jstree.com that uses variable like named "json_data".

Please help me to understand how JSTree Ajax call / Lazy Loading works with search functionality with example.

This is really helpful for me. Thank you in advance.

[Ivan Bozhanov]

As I answered in the stackoverflow topic - just make sure "data" is a valid jQuery AJAX config, it can not be a function. In your code remove the search.ajax.data part. That will be enough.
When search is invoked (for example searching for "foo"), your server will receive a request, as per your config it will be:
GET Tree/Index?str=foo

In response you must return valid JSON (with JSON Content-Type header), it should be an array of unique IDs that need to be opened in order to reveal the matches. So this basically means - collect all matches to "foo", get a collection of their parents, leave only unique entries and return it. Example response would be:
["node_id_1","node_id_2"]

jstree will then load those nodes and perform the client side part of the search. I hope this is clear enough.

Best regards,
Ivan

[Temuri Imnaishvili]

Ivan,

How about the following situation. Let's say I have a couple of nodes at the top and I'm doing AJAX search for the nodes that are deeper than the second level:

Level 1 -> Level 2 -> Level 3 -> ...... -> Level N.

In other words, parents of the matched nodes ARE NOT the nodes at the top.

So, if found nodes are children of Level 3 and I return [Level 3] to the client - how would jsTree know that in addition to [Level 3] it should open [Level 2] ?

Thanks!