show_only_matches не работает для поискового плагина jstree

Question

Я настроил свой Jstree следующим образом:

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

Тем не менее show_only_matches Опция, кажется, не имеет никакого эффекта. Я что-то пропустил?

Answer 1

Привет @ Александр Сурафель, вам нужно установить свой объект конфигурации jsTree "show_only_matches_children": true свойство, необходимое для того, чтобы скрыть все узлы самим скриптом. Так что вы просто должны установить, как это, вы задаете объект 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));

Пример: codepen https://codepen.io/headmax/pen/BwvYMr?editors=1111

Answer 2

Проблема была вызвана неиспользованием style.min.css для правильной версии.

Answer 3

Пожалуйста, проверьте, выполняется ли поиск с учетом регистра, вы можете попробовать сделать его явно ложным, как показано ниже. Хотя по умолчанию это ложь.

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

Полный код вместе с вашим HTML, был бы простой вариант, чтобы найти проблему. Если $ rulesTree является допустимым объектом jsTree, поместите ваш поисковый код в

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

Ниже приведен простой код поиска, который я использую, и он отлично работает. Для полного примера вы можете обратиться 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);
   });
});