New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Search (or filter) in jqTree - solved #230

Closed
lmaran opened this Issue Nov 9, 2013 · 8 comments

Comments

Projects
None yet
7 participants
@lmaran

lmaran commented Nov 9, 2013

Hi all,

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

jqtreesearchresult

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

@mbraak

This comment has been minimized.

Show comment
Hide comment
@mbraak

mbraak Nov 9, 2013

Owner

This looks very useful!

Owner

mbraak commented Nov 9, 2013

This looks very useful!

@FKobus

This comment has been minimized.

Show comment
Hide comment
@FKobus

FKobus Nov 11, 2013

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

FKobus commented Nov 11, 2013

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

This comment has been minimized.

Show comment
Hide comment
@weerasekaravw

weerasekaravw Jan 12, 2014

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

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

@jacobuid

This comment has been minimized.

Show comment
Hide comment
@jacobuid

jacobuid Apr 28, 2014

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

@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

This comment has been minimized.

Show comment
Hide comment
@vignesh290489

vignesh290489 Jun 27, 2014

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

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

This comment has been minimized.

Show comment
Hide comment
@mbraak

mbraak Jun 29, 2014

Owner

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

mbraak commented Jun 29, 2014

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

This comment has been minimized.

Show comment
Hide comment
@vignesh290489

vignesh290489 Jul 17, 2014

Hi mbraak ,

Thank you so much for above solution.

It worked charm :)

Hi mbraak ,

Thank you so much for above solution.

It worked charm :)

@husseinkhatib

This comment has been minimized.

Show comment
Hide comment
@husseinkhatib

husseinkhatib Apr 21, 2015

the filtering above is very slow on larger database

the filtering above is very slow on larger database

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment