jstree：如何使搜索中的结果节点（带有子节点）可扩展？答案

【问题标题】：jstree: how to make resulting nodes (with children) from a search expandable?jstree：如何使搜索中的结果节点（带有子节点）可扩展？
【发布时间】：2023-03-26 13:11:01
【问题描述】：

我正在使用以下树小提琴：searchable jstree fiddle

我的问题是，如何使搜索结果节点可扩展？示例：在上面的小提琴中，“橙县”节点有三个子节点。如果我手动深入到“橙县”，我可以展开它并查看子节点。但是，如果我在搜索框中输入“橙县”，我将无法展开“橙县”来查看子节点。

提前致谢！以下是 HTML：

<div>
  <input class="search-input form-control" placeholder="Search term"/>
</div>
<div id="SampleContainer">
  <ul>
    <li>
      NORTH
      <ul>
        <li>
          ORANGE COUNTY
          <ul>
            <li>
              GANGLAND
            </li>
            <li>
              MOTOWN
            </li>
            <li>
              CARLSBAD
            </li>
          </ul>
        </li>
        <li>
          BLUE COUNTY
          <ul>
            <li>
              SANFRAN
            </li>
            <li>
              ZOOTOWN
            </li>
            <li>
              GUETECH
            </li>
            <li>
              D
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

JS：

$.jstree.defaults.search.show_only_matches = true;
$.jstree.defaults.search.show_only_matches_children = false;
$.jstree.defaults.search.search_leaves_only = false;
$(function() {
  $(".search-input").keyup(function() {
    var searchString = $(this).val();
    console.log(searchString);
    $('#SampleContainer').jstree('search', searchString);
  });

  $("#SampleContainer").jstree({
    "plugins": ["wholerow", "checkbox", "search"],
    core: {
      "themes": {
        "icons": false,
        "dots": false,
        "responsive": true,
        "stripes": true
      }
    }
  });
});

【问题讨论】：

标签： tree jstree expandable collapsable

【解决方案1】：

其实我想我明白了。我不得不将 $.jstree.defaults.search.show_only_matches 设置为 false 而不是 true。

【讨论】：