CODEWITHSUNDEEP
jstreejstree-search
Alexander Suraphel
Alexander Suraphel

Reputation: 10633

show_only_matches not working for jstree's search plugin

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?

Upvotes: 3

Views: 3453

Answers (3)

Alexander Suraphel
Alexander Suraphel

Reputation: 10633

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

Upvotes: 1

Asif Nowaj
Asif Nowaj

Reputation: 356

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);
   });
});

Upvotes: 0

user8556290
user8556290

Reputation:

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

Upvotes: 4

Related Questions