使用 jstree 搜索插件为节点标题启用精确的多词搜索答案

【问题标题】：Enable exact multi word search for node titles with the jstree search plugin使用 jstree 搜索插件为节点标题启用精确的多词搜索
【发布时间】：2013-08-29 13:02:27
【问题描述】：

我使用 jstree 搜索插件 (documentation) 在我的 HTML 树的标题字段中搜索多个 ID。

我采用了原始的 jstree code（第 3398 行）并按照建议的 here 对其进行了更改，以在树的标题字段中启用多字搜索。

它适用于“标题包含”查询（例如节点 x 的标题 ID:40857332 和节点 y 的标题 ID:408 包含搜索词 ID:408），但我不知道如何更改代码以便仅找到完全匹配（例如节点 y 的标题 ID:408 匹配搜索词 ID :408 完全正确）。

函数被这样调用：

$("#my_html_tree").jstree("search", search_words);

具有以下配置：

"search" : {"case_insensitive" : true, "search_method": "jstree_title_contains_multi"}

变量“search_words”是一个包含多个 ID 的字符串：

var search_words = "ID:4 ID:7 ID:3188";

HTML 树节点的格式：

<li id="3188"> <a title="ID:3188">Tree node 3188</a></li>

这是我修改后的代码：

$.expr[':'].jstree_title_contains_multi = function(a,i,m){

    var word, words = [];
    var searchFor = m[3].toLowerCase().replace(/^\s+/g,'').replace(/\s+$/g,'');
    if(searchFor.indexOf(' ') >= 0) {
        words = searchFor.split(' ');
    }
    else {
        words = [searchFor];
    }
    for (var i=0; i < words.length; i++) {
        word = words[i];
        if((a.getAttribute("title") || "").toLowerCase().indexOf(word) >= 0) {
            return true;
        }
    }
    return false;

};

我必须如何更改代码才能仅搜索完全匹配？

任何帮助将不胜感激。

【问题讨论】：

标签： javascript jquery jquery-plugins jstree

【解决方案1】：

我找到了以下解决方案：而不是使用

if((a.getAttribute("title") || "").toLowerCase().indexOf(word) >= 0)

我用

if((a.getAttribute("title") || "").toLowerCase() === word )

【讨论】：

【解决方案2】：

使用 id 属性而不是 title 更简洁。您甚至可以同时使用两者。

配置：

"search" : {"case_insensitive" : true, 
           "search_method": "jstree_codigo_descripcion"}

搜索电话

var codigo = "0102";
var descripcion = "sdf";
jQuery("#arbol").jstree("search",cod +"-"+ desc);

树

<div id="arbol">
  <ul>
    <li><a>01</a>
      <ul>
        <li><a>0101</a>
          <ul>
            <li><a id="010101" title="foo">010101 foo</a></li>
            <li><a id="010102" title="bar">010102 bar</a></li>                 
          </ul>
        </li>
        <li><a>0102</a>
          <ul>
            <li><a id="010201" title="asdf">010201 asdf</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

新的搜索功能

   $.expr[':'].jstree_codigo_descripcion = function(a, i, m) {
        var searchFor = m[3].toLowerCase();
        var params = searchFor.split('-');
        var codigo = params[0];
        var descripcion = params[1];

        // attribute id start with codigo
        // attribute title contains descripcion

         if (codigo.length > 0 && descripcion.length === 0) {
            if ((a.getAttribute("id") || "").toLowerCase().indexOf(codigo) === 0) {
                return true;
            }
        }
        if (codigo.length === 0 && descripcion.length > 0) {
            if ((a.getAttribute("title") || "").toLowerCase().indexOf(descripcion) >= 0) {
                return true;
            }
        }
        if (codigo.length > 0 && descripcion.length > 0) {
            if ((a.getAttribute("id") || "").toLowerCase().indexOf(codigo) === 0 &&
                    (a.getAttribute("title") || "").toLowerCase().indexOf(descripcion) >= 0) {
                return true;
            }
        }
        return false;
    };

【讨论】：