Jquery to find nodes and highlight in tree view

Question

I have a tree view list with Ui Li structure, i want to create a jquery based search that will select or highlight text in tree.

can any one help?
Below is the tree view sample:

<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>

score 3 · Accepted Answer · answered Apr 11 '15 at 07:10

3

<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>

answered Apr 11 '15 at 07:10

S.Sreeram

225
1
8

1

Thanks this works for me....is there a way i can open the tree node as well...like i search for 000000001615 in the end node i need to add a class "expand" when item is found and "collapse" when item is not found – Yogesh Duggal Apr 11 '15 at 09:30
1

.expand { display: block;} & .collapse {display: none;} along with the class 'highlight', also add & remove the above classes – S.Sreeram Apr 11 '15 at 09:51
we are adding highlight class to he end node...i want a way to add class to parent node like above DRUM RACK node. – Yogesh Duggal Apr 11 '15 at 10:03
$(obj).parent().prev().addClass('someclassName') – S.Sreeram Apr 11 '15 at 10:24

score 1 · Answer 2 · edited May 23 '17 at 12:23

There's a nice answer to your problem in this stackoverflow post using jQuery.

Here's an answer to your problem based on solutions posted there.

(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);
}

It highlights all text elements that aren't blank spaces.

I've come up with this solution using only javascript:

(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);
}

It does exactly the same.

Kind regards.

MJ Vakili · Answer 3 · 2015-04-11T06:57:25.583

try this:

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;
    }

style :

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

e.g: event change input search

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

Jquery to find nodes and highlight in tree view

3 Answers3