Topic: Advice on filtering tree

Hello,
  I have built a tree reading in JSON from a php file, and have around 400 nodes. These are all grouped in one listing using a 'forest:true'.  I would like to get advice on the best approach to use to filter the listing out as a user types in a text box.  I am using mootools 1.2 and mif.tree-trunk.js (I have used both trunk (as of yesterday) and v1.1).

The approach I am currently working with is modified/copied from the various demos available, and does seem to work, but has some quirks I'd like to avoid.

I have a text box as:

<div class="searchbox" id="searchbox">Search: <input type="text" id="SystemSearch" onkeyup="searchEntry(this.value)"></div>

I have my tree defined as:

    tree = new Mif.Tree({
        container: $('tree_container'),
        forest: true,
        
        initialize: function(){
            this.initSortable();
            this.initRows();
            new Mif.Tree.KeyNav(this);

        },
        types: {
            folder:{
                openIcon: 'mif-tree-open-icon',
                closeIcon: 'mif-tree-close-icon'
            },
            server:{
                openIcon: 'mif-tree-book-icon',
                closeIcon: 'mif-tree-book-icon',
                // loadable: true
            },
        },
        dfltType:'server',
        height: 18,
        onCopy: function(from, to, where, copy){
            if(from.getParent()==copy.getParent()){
                copy.set({
                    property: {
                        name: 'copy '+from.name
                    }
                });
            }
        },

    })

And my search function defined as:

function searchEntry(value) {
   var pattern = value; // could also be  '/^' + value + '.*$/' with 'new Regex' below
   
   tree.root.recursive(function() {
    if(this.name.length > 0) {
        
           if(this.name.indexOf(value)!=-1) {
               tree.scrollTo(this);
                return false;
           }  else {
               this.remove();
               // this.style.visibility='hidden'; <-- something like this 
               
           }
       }
   });
}

There are a couple of issues with this approach, as I have to make a request to repopulate the tree.  As a user may backspace or delete part of the text in the search box, this could be somewhat cumbersome (and not very elegant).  I was thinking a nicer approach would be to selectivity set the visibility to hidden on nodes that do not match the pattern so as a change in the text would just turn off the ones that no longer match and show the ones that do. 

The other question I have, and possibly more a knowledge gap on my part, is how I could filter these out by a regex (or if thats even advisable)?  My OOP regex is somewhat limited, but I'm fairly decent at it with Perl, so a pointer or two may pave the way to great enlightenement ;-).  I have tried something of the form 'this.node.match(someCompiledRegex)' (the regex being '/^[variable].*$/' but did not get very far with that (I received some very strange results)

Thanks for any help!

Jess

Re: Advice on filtering tree

show/hide nodes methods will be implemented in future.

Re: Advice on filtering tree

Hi Moro,
  Ok. thanks.

Jess

Re: Advice on filtering tree

show/hide implemented rev87
now you can do:

node.set({hidden:true})//hide node
node.set({hidden:false})//show node

Re: Advice on filtering tree

moro wrote:

show/hide implemented rev87
now you can do:

node.set({hidden:true})//hide node
node.set({hidden:false})//show node

Oh, terrific, I'll give this a try!

Re: Advice on filtering tree

Hello,
  I have gotten this working with the following:

function searchEntry(value) {
   var pattern = value + '*';
   
   mifNavTree.root.recursive(function() {
    if(this.name.length > 0) {
        // this.set({hidden:false});
           if(this.name.indexOf(value)!=-1) {
               this.set({hidden:false});
               mifNavTree.scrollTo(this);
               if((this.name.length == value.length) && (this.name == value)) {
                   mifNavTree.select(this);
               }
                return false;
           }  else {
               this.set({hidden:true});
               // this.style.visibility='hidden';
              
           }
       }
   });
}

Thanks a ton moro!  Much appreciated.  Working perfect now.  I'll post updates to this code as I trim it out (i'm sure it could be tuned further).

Jess