如何在jtree搜索过滤器jquery(jtree中的多词条件)中播种结果多词组合匹配

how to sow result multiple word combination match in jtree search filter jquery (multiple word & condition in jtree)

本文关键字:jtree 结果 组合 条件 搜索 过滤器 jquery      更新时间:2023-09-26

我有这样的代码。我正在使用jtree搜索fileter。


$(document).on("keyup paste", "input#groups-quick-filter", function(){
    var tmpStr = $(this).val().replace(/'s's+/g, ' ');
    var arrStr = tmpStr.split(' ');
    var strCnt = "";
    for(i = 0; i < countWords(tmpStr); i++){
        strCnt = strCnt + arrStr[i] + " ";
        //groupsDataTable.jstree("search", arrStr[i]);
        groupsDataTable.jstree(true).search(arrStr[i]);
    }
});

我有像这个一样的jtree数组(节点(值


1            abc
2            abc xyz
3            xyz abc 
4            testabcxyz
5            test xyz
6            xyz
7            abc test xyz
8            xyzabctest

搜索过滤器中的输入值:abc xyz(它给了我。(


Result 
1            abc xyz
2            xyz abc 
3            testabcxyz
4            test xyz
5            xyz
6            abc test xyz
7            xyzabctest

我只想要包含%abc% & %xyz%的结果,而不是像%abc% or %xyz%那样的结果。我的代码给了我或考虑所有单词的结果。

search插件中,有一个append标志:

append(布尔值(如果设置为true,则此搜索的结果将附加到上一个搜索

请参阅:https://www.jstree.com/api/#/?f=search(str%20[,%20skip_async](

有了这个,我调整了你原来的代码。基本上,我们将在数据中搜索每个用空格分隔的术语。

工作示例:https://jsfiddle.net/Twisty/6s1q4L6f/5/

HTML

Filter:
<input type="text" id="groups-quick-filter">
<span class="clear-button">X</span>
<div id="jstree">
  <ul>
    <li>abc</li>
    <li>abc xyz</li>
    <li>xyz abc</li>
    <li>testabcxyz</li>
    <li>test xyz</li>
    <li>xyz</li>
    <li>abc test xyz</li>
    <li>xyzabctest</li>
  </ul>
</div>

CSS

.clear-button {
  font-family: "Arial", sans-serif;
  margin-left: -22px;
  display: none;
  cursor: pointer;
}

jQuery

$(function() {
  $("#jstree").jstree({
    "plugins": [
      "search"
    ],
  });
  $(".clear-button").click(function() {
    $("#groups-quick-filter").val("");
    $("#jstree").jstree(true).clear_search();
    $(this).hide();
  })
  $("#groups-quick-filter").keyup(function() {
    $(".clear-button").show();
    var term = $(this).val();
    if (term.length && term.indexOf(' ')) {
      var arrStr = term.split(' ');
      $.each(arrStr, function(k, v) {
        $("#jstree").jstree(true).search(v, true, false, false, true);
      });
    } else {
      $("#jstree").jstree(true).search(term);
    }
  });
});

这是基于此处显示的搜索示例:https://www.jstree.com/plugins/