Tree recursive search

[Aldri]

I've been developping this functionnality for a project I'm working on, and I though it might be usefull to someone.
With this small code you can search in any opened node (similar to the CTRL + F function of any program), it searches the next node corresponding to the text you typed.
But i also added the partial search: use * to match any part of a word --> *word (the searched text ends with the searched word), *word* and word*
You can easily disable this by removing the red part of the code.
This code isn't fully perfect, it doesn't take into account any special character used in regexp, if you want it to be safe you should add a filter for these characters (ex: replace * by \*)
I used a statusbar for the search field and buttons:

            bbar: new Ext.ux.StatusBar({
                defaultText: statusMessage,
                id: 'right-statusbar',
                statusAlign: 'right', // the magic config
                items: [{
                    xtype: 'textfield',
                    blankText: "Enter a word to search...",
                    id: "searchField",
                    width: 150,
                    listeners: {
                        'focus' : function(){
                            var statusBar = Ext.getCmp('right-statusbar');
                            statusBar.setStatus({
                                text:'Hint: Use * for a partial search.'
                            });
                        }
                    }
                }{
                    xtype: 'button',
                    text: "Search", 
                    id: "searchButtonOpened",
                    scope: this, 
                    handler: loadFn.createCallback('searchButtonOpened')
                }]
            })

The callback function :

var loadFn = function(btn){
        btn = Ext.getCmp(btn);
        var searchText = Ext.getCmp('searchField').getValue();
        if(btn.id == 'searchButtonOpened') {
            if(searchText.substring(searchText.length-1,searchText.length)=="*") {
                if(searchText.substring(0,1)=="*")
                    searchText = searchText.replace('*','');
                else
                    searchText = "^"+searchText.replace('*','');
            } else if(searchText.substring(0,1)=="*")
                searchText = searchText.replace('*','')+"$";
            var tree = Ext.getCmp('tree');
            var searchRoot = tree.selModel.selNode || Ext.getCmp('tree').root; // if no selection use root node
            var searchedNode = searchInAllNodes(searchRoot,searchText,searchRoot.id);
            if(searchedNode) { // if match found, select the node
                searchedNode.select();
            } else { // else restart search from root (loop)
                var searchRoot = Ext.getCmp('tree').root;
                var searchedNode = searchInAllNodes(searchRoot,searchText,searchRoot.id);
                if(searchedNode) {
                    searchedNode.select();
                } else { // if no match found at all
                    var statusBar = Ext.getCmp('right-statusbar');
                    statusBar.setStatus({
                        text:'No result'
                    });
                }
            }
        }
    };

And finally the recursive search function :

function searchInAllNodes(n,txt,ignoreId){
        var cleanTxt = txt.toLowerCase().replace('*','').replace('$','').replace('^','');
        if(n.id!=ignoreId && n.text.toLowerCase().match(txt.toLowerCase()) && n.text.toLowerCase().match(cleanTxt)) {
            return n;
        } else {
            if(!n.hasChildNodes() && n == n.parentNode.lastChild) { // si le noeud n'a pas d'enfants et est le dernier de la branche
                if(n.parentNode.nextSibling != null) {
                    var res = searchInAllNodes(n.parentNode.nextSibling,txt,ignoreId);
                    if(res != 0) // si on retourne autre chose que 0 --> bingo
                        return res;
                    return 0;
                } else
                    return 0;
            } else {
                for(var i=0; i<n.childNodes.length; i++)
                {
                    var res = searchInAllNodes(n.childNodes[i],txt); // check dans chaque noeud enfant
                    if(res != 0) // si on retourne autre chose que 0 --> bingo
                        return res;
                }
                if(n.nextSibling != null) {
                    var res = searchInAllNodes(n.nextSibling,txt,ignoreId);
                    if(res != 0) // si on retourne autre chose que 0 --> bingo
                            return res;
                }
                return 0; // si on n'a eu que des 0, on retourne 0
            }
        }
    }

[Link_]

Hello Aldri,

If I may, I would like to know how you build this function, the possibility of finding more than one occurrence in the search?

hugs,

Hugo

[Aldri]

Wow you are a grave digger, my post is 4 years old
All of this was developped for an old version of Ext JS, it's probably not usable anymore...

[Link_]

Thanks for responding to my post my friend!
I made a small adjustment to your code to Extjs4 and worked perfectly. Your code helped me a lot.

The problem is that in my case, there are more than one occurrence of the search tree.

You made some function better than the one you created for the version of ExtJS4 that could provide for me?

hugs

[Aldri]

Sorry, I haven't used this code for a long time, it was made for a client and I don't event have access to the source code anymore since I left the company I was in at this time...
But I don't think that I did what you are looking for, sorry !

[Link_]

Anyway thank you for your attention.


If a colleague is reading this post and can help me create a function like yours, but you have the possibility to search the term if more than one, I would greatly appreciate it.


hug

[elmonje2012]

Thank you for your input. In my view it is useful.