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