3

我使用jstree 搜索插件（文档）在我的 HTML 树的标题字段中搜索多个 ID。

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

它适用于“标题包含”查询（例如节点 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;

};

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

任何帮助将不胜感激。

4

2 回答 2

1

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

配置：

"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;
    };
于 2013-10-13T04:55:16.000 回答
1

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

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

我用

if((a.getAttribute("title") || "").toLowerCase() === word )
于 2013-09-03T08:56:15.973 回答