function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
vijayskvijaysk 

Search filter data with treeview using lightning

Hi Team,

How to achieve the Search filter data with treeview using lightning:-
Anycode reference or link would be helpful

regards,
vijay sk
vijayskvijaysk
Hi all,

Below is the code which i tried and unable to do search functionality in getting matched string of JSON Data in treeview both on parent and child object:-

TestApp.app
---------------
<aura:application extends="force:slds">
   <c:TreeviewWithParentChildSearch parentObj="Account" childObj="Opportunities" parentObjNameField="Name" childObjNameField="Name"/>
</aura:application>

TreeviewWithParentChildSearch
------------------------------------
<aura:component controller="TreeviewParentChildContrl"> 
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:attribute name="spinner" type="boolean" default="false" />
    
    <aura:attribute name="items" type="Object"/>
    <aura:attribute name="parentObj" type="String" />
    <aura:attribute name="childObj" type="String" />
    <aura:attribute name="parentObjNameField" type="String" />
    <aura:attribute name="childObjNameField" type="String" />
    
    <aura:attribute name="searchResult" type="List" />
    <aura:attribute name="searchKeyword" type="String" />
    
    <lightning:spinner variant="brand" size="large" aura:id="Id_spinner" class="slds-hide" />
    
    <div class="slds-m-around_medium">
        
        <lightning:layout>
            <lightning:layoutItem size="3" padding="around-small">
                <div onkeyup="{!c.Search}">
                    <lightning:input aura:id="searchField"
                                     placeholder="Quick Find"
                                     label="Enter String"
                                     type="search"/>
                </div>
            </lightning:layoutItem>
        </lightning:layout>
        <lightning:tree items="{!v.items}" id="treeview" /> 
    </div>
</aura:component>

TreeviewWithParentChildSearchController.js
---------------------------------------------------------
({
    doInit: function(cmp,event,helper){
        var parentObj = cmp.get('v.parentObj');
        var childObj = cmp.get('v.childObj');
        var parentObjNameField = cmp.get('v.parentObjNameField');
        var childObjNameField = cmp.get('v.childObjNameField');
        var action = cmp.get('c.getParentWithChildren');
        action.setParams({
            ParentObj : parentObj,
            ChildObj : childObj,
            ParentObjNameField : parentObjNameField,
            ChildObjNameField : childObjNameField
        });
        action.setCallback(this, function(response) {
            var state = response.getState();
            console.log("state:" + state);
            if (state === "SUCCESS") {
                var objects = JSON.stringify(response.getReturnValue()).replace(new RegExp(parentObjNameField, 'g'), 'label');
                objects = objects.replace(new RegExp(childObjNameField, 'g'), 'label');
                objects = objects.replace(new RegExp(childObj, 'g'), 'items');
                console.log('Before update:'+ objects);
                cmp.set("v.items", JSON.parse(objects) );
            }
            else{
                console.log("Failed with state: " + response.getError());
            }
        });
        $A.enqueueAction(action);
    },
    Search: function(component, event, helper) {
        var products = component.get('v.items');
        var itms = JSON.stringify(products);

        var inputStr = component.find('searchField').get('v.value');
        var results = [];
        if(results=== void 0){
            results=[];
        }
        for( var i=0,directories_l = JSON.parse(itms);i<directories_l.length;i++){
            var directory = directories_l[i];
            console.log('results' +directory);
            if(directory.label.toLowerCase().startsWith(inputStr)){
                results.push(directory);
                
            }
            if(directory.items !==undefined && directory.items.length>0){
                var childsearch = Search(component,search,directory.items);
                if(childsearch!==undefined){
                    results = results.concat(childsearch);
                }
            }
        }
        cmp.set("v.items", JSON.parse(results) );
    },
})

TreeviewParentChildControl.aprxc
-----------------------------------------
public class TreeviewParentChildContrl {
    @AuraEnabled
    public static List<Account> getParentWithChildren(String ParentObj, String ChildObj, String ParentObjNameField, 
                                                      String ChildObjNameField) {
        String query = 'SELECT ' + ParentObjNameField + ', (SELECT  ' + ChildObjNameField + ' FROM ' + ChildObj + ') FROM ' 
            + ParentObj;
        return (List<sObject>)Database.query(query);
    }
}.

User-added image

User-added image

Any help of how to get the matched string json data based on input text search string.