Search using json object in callback

[jackson tan]

Hi,

How can I use the json object (formatted as the jstree in core) to use in the search callback? More questions in comments inside the code below

Eg.

search: {
            ajax: function(searchText, searchCallback){
                    $.ajax({
                        dataType: "json",
                        url: "blah blah url",
                        type: "POST",
                        data: {
                            //Some data to pass in ajax
                        },
                        success: function(data){
//This is the data received [{"id": "N1", "parent": "#", "text": "World", "type": "org"},{"id": "N2", "parent": "N1", "text": "America", "type": "org"},{"id": "N3", "parent": "N1", "text": "Asia", "type": "org"}]
//I understand and read in the docs to use an array of node id (without #) to pass in the search callback but it triggers multiple ajax request and it is slow. Why can't I just pass the json array like in the core callback (I've tried and it doesn't work)?
//Also how can I display "No results found" if there are no data passed? My tree does not do anything if I pass an empty array on search callback
                            var result, nodesToOpen;
                            result = ajaxDataFilter(data);
                            nodesToOpen = [];
                            //get only the id of nodes to open
                            _.each(result, function(record, index){
                                nodesToOpen.push(record.id);
                            });
                            searchCallback.call(this, nodesToOpen);
                        }
                    });

[Ivan Bozhanov]

The ajax option exists only to make those requests. The sole purpose of the ajax option is for you to be able to search trees with lazy loading, so that the server can tell jstree which nodes to load before actually performing the search.
If you do not use lazy loading - do not use the ajax option at all.

If you want manual control over what is considered a match (your original question) - use search_callback BUT ONLY if the default search functionality is not what you need.

As for reacting to search results - use the search.jstree event - bind to it - you will receive event data that contains all matches, and if the count is zero - you can react as you want.

Best regards,
Ivan

[jackson tan]

I'm using the lazy loading so I need the ajax search. I already saw the search_callback and I understand what it does and it's only useful for the client searching. What is the purpose of just giving the tree the nodes to load/open if you already have the nodes to display? Current search implementation is slow because if the result is 10 levels deep, the tree will have to load 10 nodes (10 ajax request) then do a jstree search which is unnecessary since in the first ajax request I already have the structure to be displayed. Is there no way to give the jstree the json structure instead of the id of the nodes to load?

As for reacting to search results, thanks for the suggestion to bind to the event but I'm just wondering isn't it logical to automatically not display any nodes if the text used for searching does not match nodes? I have to do it manually to hide the nodes when there's no match?

[Ivan Bozhanov]

Hi,

Please read the docs on the search plugin - there is a config option for displaying only matches: http://www.jstree.com/api/#/?q=matches&f=$.jstree.defaults.search.show_only_matches

As for the other question - no - it is not possible to partially load a node - jstree deals with whole nodes only, so all sibling nodes need to be loaded- there is no way to only load matches.

Best regards,
Ivan

[jackson tan]

I believe you are misunderstanding my questions.

1. How do I use search using ajax request and use the callback function to display the nodes with only 1 server request (without opening multiple nodes which sends multiple ajax since i use lazy loading).

I am already using the show_only_matches but it's not related to my question.

2. Why is it that when you use jstree search with show_only_matches to true and there's no match for the given text, the tree still displays all nodes?
Eg. $tree.jstree("search", "This is a text with no match")

The tree still displays all nodes even if the text does not match anything. It should not display any nodes since i already set the show_only_matches to true.

[Ivan Bozhanov]

Hi again,

Sorry for misunderstanding.

1) You can't. (well, you can fiddle around with setting core.data to a function and running a batch AJAX request, but that is beyond the scope of simple configuration)

2) Because there was a ticket requesting exactly the opposite - to show all nodes when there is no match, as displaying an empty DIV is confusing and I agree. You can easily hide all nodes and display a message if you need using the search related events:
.on("search.jstree", function (e, data) { if(!data.nodes.length) { $('#tree > ul').hide(); } })
.on("clear_search.jstree", function (e, data) { $('#tree > ul').show(); });

Best regards,
Ivan

[jackson tan]

Ok. Thanks for the reply. I'll just solve them manually. Also thanks for the suggestion on no.2 item. Still for me I think it is still confusing to let users set show_only_matches to true then show all nodes if there's no matches. It isn't logical. Maybe show all the nodes if show_only_matches is false. Anyway, that's just my comment. Thanks again for the quick response.

[Ivan Bozhanov]

Thanks for the input - I will have it in mind for future versions.

Best regards,
Ivan

[Rasul Abbasi]

 Hi, I had the same question, I want to know how to config jstree manually to make just one request for each individual search. 

Thanks