Question

我使用的是Jstree插件

我怀疑，我想知道是否可以按如下方式过滤多个单词：

具有以下结构：

Root node
    One Child Node
        node 1
        node 2
        node 3
    Two Child Node
        node 4
        node 5
        node 6

通过以下搜索：

一个子节点1

带来结果：

Root node
    One Child Node
        node 1

有这种可能吗？

编辑1 搜索代码：

$('#jstree-q').keyup(function () {
            if(to) { clearTimeout(to); }
            to = setTimeout(function () {
                var v = $('#jstree-q').val();
                $('#jstree').jstree(true).search(v);
            }, 250);
        });

Answer 1

我只是发现你的查询与jstree有关，但同时我花了一个半小时的时间来为jquery构建一个可能的解决方案。无论如何我会发布它，因为它可能对你有所帮助。

演示在这里：http://jsfiddle.net/sifriday/ezhj1Lbt/

我使用的方法是为li元素构建路径;例如，“节点1”元素将具有路径“根节点/一个子节点/节点1”。然后我将搜索短语分解为单词，因此您的短语“One Child node 1”给出了数组['One'，'Child'，'node'，1']。然后，我只显示路径与数组中每个单词匹配的节点。这是构建路径的jquery代码：

function process(li, path) {
    $.data($(li).get(0), 'path', path)

    $(li).children("ul").each(function(jdx, ul) {
         $(ul).children("li").each(function(idx, child_li) {
             process($(child_li), path + " / " + $(child_li).children("span").text())
         });
    }); 
}

$(".search-tree>li").each(function(idx, li) {
    process($(li), $(li).children("span").text())    
});

这里是处理搜索的jquery代码（这是区分大小写的，所以你应该搜索'One Child'而不是'one child'）：

$("#search-input").keyup(function() {
    // Hide everything to start with
    $(".search-tree li").hide()

    // Extract all the words from the search box
    var words = $("#search-input").val().split(" ");

    // Now go through the tree, and show <li>s that match the words
    $(".search-tree").find("li").each(function(idx, li) {
        // We only test the nodes, ie, the <li>s with no children
        if ($(li).find("ul").length == 0) {
            // Assume we will show the node...
            var show = true;
            // ...but decide to hide it if one of the words doesn't exist in the path
            $(words).each(function(jdx, word) {
                if ($.data($(li).get(0), 'path').indexOf(word) == -1) {
                    show = false
                }
            })
            // If the verdict was show=true, show this node and its parents
            if (show) {
                $(li).show()
                $(li).parents("li").show()
            }
        }
    });
});

我不知道我在jstree周围的方式，但你有可能将这种方法改编成Samuel在上面提到的$ .jstree.defaults.search.search_callback。

过滤多个单词的过滤列表

1 个答案: