Skip to main content
Hi Folks,

Can anyone Please help me to implement search bar for selecting Account records and displaying the records  without button in aura component..

thanks in advance
4 respuestas
  1. 20 may 2021, 13:45
    Hii Rakesh

    Try Below Code

    <aura:component controller="AccRelatedConC"

       implements="flexipage:availableForRecordHome,force:hasRecordId" access="global"  >

       <aura:attribute name="accList" type="List"/>

       <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

       <aura:attribute name="activeSections" type="List" />

       <aura:attribute name="searchResult" type="List" description="use for store and display account list return from server"/>

       <aura:attribute name="searchKeyword" type="String" description="use for store user search input"/>

       

       <div class="slds-border_bottom">

          <h1>Accounts</h1>

       </div>

       <div class="slds-scrollable_y">

          <div class="slds-text-longform">

                        <lightning:input value="{!v.searchKeyword}"

                placeholder="search Accounts.."

                aura:id="searchField"

                name="searchField"

                label="Account Name"

                onchange="{! c.onChange1 }"             />

                        <table class="slds-table slds-table_cell-buffer slds-table_bordered">

                    <thead>

                       <tr class="slds-text-title_caps">

            <td>

          <th scope="col">Persona</th> 

                           </td></tr>

                    </thead>

                    <tbody>

                        <aura:iteration items="{!v.accList}" var="acc" indexVar="index">

                            <tr>

                                <td>

                                    <div class="slds-truncate" title="">{!acc.Name}</div>

                                </td>

                                

                            </tr>

                        </aura:iteration>

                    </tbody>

                </table>

          </div>

       </div>

    </aura:component>

    Helper:

    ({

        SearchHelper : function(component, event, helper) {

            var action = component.get('c.fetchAcc');

             action.setParams({ searchKey : component.get("v.searchKeyword"),

                              });

            action.setCallback(this, function(response){

                var state = response.getState();

                if(state === "SUCCESS"){

                    var allValues = response.getReturnValue();

                    console.log("allValues--->>> " + JSON.stringify(allValues));

                    //component.set('v.activeSections', allValues.Name);

                    component.set('v.accList', allValues);

                }

                else if(state === "ERROR") {

                    var errors = response.getError();

                    if(errors){

                        if(errors[0] && errors[0].message){

                            console.log("Error Message: " + errors[0].message);

                        }

                    }

                    else{

                        console.log("Unknown Error");

                    }

                }

            });

            $A.enqueueAction(action);

        }

    });

    Controller:

    ({

         onChange1: function (component, evt, helper) {

             var selectedLimit = component.find('searchField').get('v.value');

             

             component.set('v.searchKeyword', selectedLimit);

            helper.SearchHelper(component, event);

        }

    })

    Apex:

    public class AccRelatedConC {

      @AuraEnabled(cacheable=true)

        public static List<Account> fetchAcc (String searchKey){

            String query= 'SELECT Id, Name FROM Account';

             if ( searchKey != Null ) {

                String key = '%' + searchKey + '%';

                query += ' WHERE Name LIKE :key';

            }system.debug(Database.query( query ));

             return Database.query( query );

            

        }  

    }

    Please Mark It As Best Answer If It Helps

    Thank You!

     
0/9000