筛选包含多个单词的筛选列表

filter filtered list with multiple words

本文关键字：筛选 列表 包含多 单词      更新时间：2023-09-26

I使用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);
        });

我刚刚发现您的查询与jstree有关，但与此同时，我花了半个小时在jquery中构建了一个可能的解决方案。无论如何我都会把它贴出来，因为它可能对你有帮助。

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

我使用的方法是为li元素构建一条路径；例如，"node 1"元素将具有路径"Root node/One Child node/node 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代码（这是区分大小写的，所以你应该搜索"一个孩子"，而不是"一个子"）：

$("#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。

相关文章：