JQuery Dynatree - Rearrange the treeview based on the text field search

Question

I would like to make the tree view for the account records. So, I have used the Dynatree to making the tree view. It is work fine. Now I owuld like to impletement the search feature.

How to make the Dynatree filter in Visulforce page using javascript.

I want to rearrange the tree by searching from the textfield.

I found the follwoing code for the filter but I dont knwo how to use this. Please let me know where should we use below the code.

Code Snippet:

DynaTreeNode.prototype.search = function(pattern){

    if(pattern.length < 1 && !clear){
        clear = true;
        this.visit(function(node){
            node.expand(true);
            node.li.hidden = false;
            node.expand(false);
        });
    } else if (pattern.length >= 1) {
        clear = false;
        this.visit(function(node){
            node.expand(true);
            node.li.hidden = false;
        });

        for (var i = 0; i < this.childList.length; i++){
            var hide = {hide: false};
            this.childList[i]._searchNode(pattern, hide);
        }
    } 
},

score 0 · Answer 1 · answered May 08 '15 at 09:09

You can use below function to filter out based on your search term.

<input type="text" onchange="filterNodes(this.value);return false;" />

function filterNodes(searchTerm) {
        // Only show nodes matching the specified search term
        var startNode = $("#divTree").dynatree("getRoot");
        startNode.visit(function(node) {
            if (node.isVisible() && node.data.title) {
                // Filter currently visible non-root nodes.
                if (node.data.title.indexOf(searchTerm) >= 0) {
                    // Make sure we and all our parents are visible
                    node.visitParents(function(node) {
                        $(node.li).show();
                        return (node.parent != null);
                    }, true);
                    // Terminate the traversal of this branch since the node matches
                    return 'skip';
                }
                else {
                    // Hide the node.
                    $(node.li).hide();
                }
            }
        });
    }

This will filter entire branch if one node is found matching.

JQuery Dynatree - Rearrange the treeview based on the text field search

1 Answers1