show_only_matches not working for jstree's search plugin

Question

I have configured my jstree as follows:

var $proceduresTree = $('#procedures-tree');

$proceduresTree.jstree({
    'core' : {
        'data' : data,

        "themes":{
            "icons":false
        }
    },
    "search": {
        "show_only_matches": true
    },
    "plugins" : ["checkbox", "search"]

});


$('#search_input').keyup(debounce(function () {

    var v = $('#search_input').val().trim();

    debugger;

    if( false &&  v.length === 0 ) {
        $proceduresTree.jstree(true).hide_all();
    }
    else {
        $proceduresTree.jstree(true).search(v);
    }

}, 50));

However the show_only_matches option doesn't seem to have any effect. Am I missing something?

score 4 · Answer 1 · 2017-10-18T11:34:01.617

4

Hi @Alexander Suraphel you need to set the your config object jsTree "show_only_matches_children": true the property needed to hide all nodes by the script himself.So you've just to set like this you object config jsTree.

var $proceduresTree = $('#procedures-tree');

$proceduresTree.jstree({
    'core' : {
        'data' : data,

        "themes":{
            "icons":false
        }
    },
    "search": {
        "show_only_matches": true,
        "show_only_matches_children": true
    },
    "plugins" : ["checkbox", "search"]

});


$('#search_input').keyup(debounce(function () {

    var v = $('#search_input').val().trim();

    //debugger;

        $proceduresTree.jstree(true).search(v);


}, 50));

Example : codepen https://codepen.io/headmax/pen/BwvYMr?editors=1111

edited Oct 18 '17 at 11:34

answered Oct 18 '17 at 08:54

headmax, thanks for the snippet. But setting `show_only_matches_children` to `true` didn't work for me. The only difference I found between your code and mine is you use the `parent` property while I use `children`. Does that make a difference? – Alexander Suraphel Oct 18 '17 at 14:36
@Alexander Suraphel yes because if you want search a parent name or if a child word match and he got a parent the search will got troubles to select parent and node child in the right way. – Oct 18 '17 at 16:35
headmax, ended up refactoring my data to `parent` format. No change :( – Alexander Suraphel Oct 19 '17 at 07:22
i hope you can post a full example because this example run and i can't do anything without something real as a few example with data using ... etc – Oct 19 '17 at 07:25
1

headmax, I copied my data to your snippet and worked fine. Upon further investigation I found out that the stylesheet I used doesn't have a rule for `jstree-hidden` class. I copied/pasted the stylesheet you linked and it worked fine! – Alexander Suraphel Oct 19 '17 at 08:03
@Alexander Suraphel nice ;) the reason why we need to post all part of the code ;) good luck for the next. Regards. – Oct 19 '17 at 11:03
Thanks for the help BTW! – Alexander Suraphel Oct 19 '17 at 12:30

score 1 · Answer 2 · answered Oct 26 '17 at 18:13

1

The issue was caused by not using style.min.css for the right version.

answered Oct 26 '17 at 18:13

Alexander Suraphel

10,103
10
55
90

score 0 · Answer 3 · answered Oct 24 '17 at 17:34

Please check whether search is made as case_sensitive, you can try with making it explicitly false as below. Though by default it is false.

"search": {
    "case_sensitive": false,
    "show_only_matches": true
}

Complete code along with your HTML, would have been easy option to find the issue. If $proceduresTree is a valid jsTree object then put your search code within

$(document).ready(function () {
   //Your search code goes here.
});

Below is a simple search code that I use, which works fine. For complete example you can refer https://everyething.com/Example-of-simple-jsTree-with-Search

$(document).ready(function () {
   $(".search-input").keyup(function () {
       var searchstring = $(this).val().trim();
       $('#simplejstree').jstree('search', searchstring);
   });
});

Sorry Asif, for not closing this question. The problem was caused by not using the right CSS file as described in the above comments. — Alexander Suraphel, Oct 26 '17 at 18:12

show_only_matches not working for jstree's search plugin

3 Answers3