CODEWITHSUNDEEP
jquerysearchtreeview
Yogesh Duggal
Yogesh Duggal

Reputation: 21

Jquery to find nodes and highlight in tree view

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>

Upvotes: 1

Views: 4245

Answers (3)

acontell
acontell

Reputation: 6922

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.

Upvotes: 1

S.Sreeram
S.Sreeram

Reputation: 225

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

Upvotes: 3

Mohamadjavad Vakili
Mohamadjavad Vakili

Reputation: 3348

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

Upvotes: 0

Related Questions