Search (or filter) in jqTree - solved

[lmaran]

Hi all,

Using onCreateLi option and loadData function of jqTree, I have implemented a searching mechanism based on what the user types.
Online demo

The same thing, for Romanian readers.
Hope this helps someone.

[mbraak]

This looks very useful!

[FKobus]

This is indeed very useful, except when you're filtering on root nodes.. they disappear.
Therefore a small adjustment is needed if you want to filter on root nodes too.

I managed to do so by adding an extra class to the main div (#tree) and an extra class to the filtered li's.

if(value.indexOf(search) > -1) {
    $li.show();
    var parent = node.parent;
    while(typeof(parent.element) !== 'undefined') {
        $(parent.element)
            .show()
            .addClass('jqtree-filtered');
         parent = parent.parent;
    }
}
if(!tree.hasClass('jqtree-filtering')) {
    tree.addClass('jqtree-filtering');
};

Here's an working example:

http://jsfiddle.net/t9G5d/1/

Try filters like:
root
child node
child child

It also disables drag and drop (reordering) when you're in filter mode.

filtering = true;

onCanMove: function(node) {
    if(filtering) {
        return false;
    } else {
        return true;
    };
}

[weerasekaravw]

Many thanks to both Imaran and FKobus for coming up with a fabulous way to do the filtering. You saved my day!

[jacobuid]

@FKobus , @mbraak

You have a great solution for this filter, one additional feature i would like to se is, if the parent node were input into the filter then show the parent and all its children.

Is this Possible?

[vignesh290489]

Hi guys,

when i used dynamic (url) to get data itz not working plz help it's urgent.
http://jsfiddle.net/t9G5d/1/

Instead "Data" we used "dataUrl" in tree and "loadData" as "loadDataFromUrl" in filter
$('#TreeView').tree({
dataUrl:url });
filter.keyup(function() {
clearTimeout(thread);
thread = setTimeout(function () {
tree.tree('loadDataFromUrl', url);
}, 50);

[mbraak]

Hello Vignesh,

If you load the data dynamically, then it's possible that you run into timing issues. The reason is that the jsfiddle example uses a timeout of 50 ms. And loading the data from an url could take longer.

Perhaps you can load the data initially using ajax:

$.getJSON(
  url,
  function(data) {
    $('#TreeView').tree({
      data: data
    });

    // the rest of the code
  }
);

[vignesh290489]

Hi mbraak ,

Thank you so much for above solution.

It worked charm :)

[husseinkhatib]

the filtering above is very slow on larger database