Jquery在树视图中查找节点并突出显示答案

【问题标题】：Jquery to find nodes and highlight in tree viewJquery在树视图中查找节点并突出显示
【发布时间】：2015-04-11 06:39:40
【问题描述】：

我有一个带有 Ui Li 结构的树视图列表，我想创建一个基于 jquery 的搜索，它将选择或突出显示树中的文本。

谁能帮忙？
下面是树视图示例：

<ul>
   <li menuid="1">
       <span class="arrow collapsible expand">&nbsp;</span>
       <span><a href="#" name="basenode">ML034</a></span>
     <ul>
       <li menuid="338">
           <span class="arrow collapsible expand">&nbsp;</span>
           <span><a href="#" name="basenode">DRUM RACK</a></span>
           <ul>
               <li menuid="339"><span class="arrow">&nbsp;</span>
                  <span><a href="#" name="basenode">000000001615</a></span>
               </li>
           </ul>
         </li>
     </ul>

【问题讨论】：

标签： jquery search treeview

【解决方案1】：

<input type="text" id="search" />

<style>
  .highlight {
    background: red;
  }
</style>

<script>
$(function(){
$('#search').on('keyup', function (){
  var val = $(this).val().toLowerCase()
  if (val) {
    $('ul li span a').each(function(idx, obj){
      if ($(obj).text().toLowerCase().indexOf(val) !== -1)
        $(obj).addClass('highlight')
      else
        $(obj).removeClass('highlight')
    })
  }
  else
    $('ul li span a').removeClass('highlight')
})
})
</script>

【讨论】：

谢谢这对我有用......有没有办法我也可以打开树节点......就像我在末端节点中搜索 000000001615 我需要添加一个类“扩展”找到项目时，未找到项目时“折叠”
.expand { display: block;} & .collapse {display: none;} 以及“highlight”类，同时添加和删除上述类
我们正在向他的端节点添加高亮类...我想要一种向父节点添加类的方法，例如 DRUM RACK 上方的节点。
$(obj).parent().prev().addClass('someclassName')

【解决方案2】：

在这篇使用 jQuery 的 stackoverflow 帖子中有一个很好的答案。

这是一个answer，根据那里发布的解决方案解决您的问题。

(function (elem, fun) {

    $(elem)
        .find(":not(iframe)")
        .addBack()
        .contents()
        .filter(function () {
        return this.nodeType === 3 && skipSpace(this.nodeValue) && fun(this.parentNode);
    });
})("ul:first", function(node) { node.style.color = "red"; });

function skipSpace(str) {
    var index = str.search(/^[\S]/);
    if (index === -1) {
        return "";
    }
    return str.slice(index);
}

它突出显示所有非空格的文本元素。

我只使用 javascript 就想出了这个 solution：

(function searchAndApply(node, fun) {
    if(!node) {
        return;
    }

    searchAndApply(node.nextSibling, fun);
    searchAndApply(node.firstChild, fun);

    if(node.nodeType === 3) {
        return skipSpace(node.nodeValue) && fun(node.parentNode);
    }
})(document.querySelector("ul:first-child"), function (node) {
    node.style.color = "red";
});

function skipSpace(str) {
    var index = str.search(/^[\S]/);
    if (index === -1) {
        return "";
    }
    return str.slice(index);
}

完全一样。

亲切的问候。

【讨论】：

【解决方案3】：

试试这个：

var searchTree: function (textInput) {
        var count=0;
        if (textInput === '') {
            this.find('li:visible').removeClass('search-item-tree');
        }
        else {
            count = this.find('li:visible').removeClass('search-item-tree').filter(function () {
                var v = $(this).data();

                if (v.name.toUpperCase().indexOf(textInput.toUpperCase().trim()) !== -1) {

                        $(this).find('[name="basenode"]:first').addClass('search-item-tree');
                    return true;
                }
                return false;
            }).length;
        }
        return count;
    }

风格：

  .search-item-tree{
    font-style: italic;
    font-weight: bold;
    background-color:lightgreen;
}

例如：事件更改输入搜索

searchTree.call($('tree selector'),$(this).val())

【讨论】：