带有Ajax调用/延迟加载的JSTree搜索

Question

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.

Answer 1

The search.ajax.data config option can not be a function - it should be an object (just like a normal jQuery AJAX config), jstree will only add a str property to that object. As for GET or POST - use whichever you want - all you need to specify as search.ajax is a valid jQuery AJAX config.

Answer 2

Change search settings to :

"search": {
    "ajax": {
         "url": url,
            }
          },

Answer 3

Your search configuration need to correct, to search with a keyword you need to pass the keyword to your url and You should use GET method to retrive data. Try this

        // Configuring the search plugin
        "search" : {
            // As this has been a common question - async search
            // Same as above - the `ajax` config option is actually jQuery's AJAX object
            "ajax" : {
                "url" : "Tree/Search",
                // You get the search string as a parameter
                "data" : function (str) {
                    return { 
                        "operation" : "search", 
                        "q" : str 
                    }; 
                }
            }
        },