show_only_matches 不适用于 jstree 的搜索插件答案

【问题标题】：show_only_matches not working for jstree's search pluginshow_only_matches 不适用于 jstree 的搜索插件
【发布时间】：2017-10-18 07:58:10
【问题描述】：

我的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 选项似乎没有任何效果。我错过了什么吗？

【问题讨论】：

标签： jstree jstree-search

【解决方案1】：

嗨@Alexander Surapel，您需要设置您的配置对象 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

【讨论】：

headmax，感谢 sn-p。但是将show_only_matches_children 设置为true 对我不起作用。我发现您的代码和我的代码之间的唯一区别是您使用parent 属性，而我使用children。这有什么不同吗？
headmax，最终将我的数据重构为parent 格式。没有变化:(
我希望你能发布一个完整的例子，因为这个例子可以运行，如果没有一些真实的东西，我什么也做不了，比如一些使用数据的例子......等
headmax，我将我的数据复制到你的 sn-p 并且工作正常。经过进一步调查，我发现我使用的样式表没有jstree-hidden 类的规则。我复制/粘贴了您链接的样式表，效果很好！

【解决方案2】：

该问题是由于未将 style.min.css 用于正确的版本而引起的。

【讨论】：

【解决方案3】：

请检查搜索是否区分大小写，您可以尝试将其显式设为 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);
   });
});

【讨论】：

对不起 Asif，没有结束这个问题。问题是由于没有使用上述 cmets 中描述的正确 CSS 文件造成的。