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

您好@Alexander Suraphel您需要设置 配置对象jsTree "show_only_matches_children": true 需要的属性来隐藏所有节点<强大>由剧本本人。所以你只需要像这样设置你对象配置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

请检查搜索是否为case_sensitive，您可以尝试将其显式为false，如下所示。虽然默认情况下是假的。

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

完整的代码和HTML一起，很容易找到问题。如果$ proceduresTree是有效的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);
   });
});

Answer 3

问题原因是未使用style.min.css作为正确的版本。

show_only_matches不适用于jstree的搜索插件

3 个答案: