Search functionality in Lightning Web Component - Salesforce Globe For You

Solution: In this example,you can search the leads that are existing in the system.

Apex Class: LeadController

public class LeadController {

    @AuraEnabled

    public static List<Lead> getLeads(String leadName) {

        system.debug('Lead:'+leadName);

        leadName = '%' + leadName + '%';

        List<Lead> lstLead = new List<Lead>();

        lstLead = [Select id,name,leadSource from Lead WHERE Name LIKE :leadName order by Createddate];

        system.debug('lstLead:'+lstLead);

        return lstLead;

    }

}

searchFunctionalityInLWC.html

<template>

    <lightning-card title="Search Functionality in LWC" icon-name="standard:Lead">

        <lightning-layout multiple-rows="true" vertical-align="end">

            <lightning-layout-item size="12" small-device-size="10" medium-device-size="8" large-device-size="6" padding="around-small">

                    <div class="slds-form-element">

                            <div class="slds-form-element__control">

                                    <lightning-input type="search" 

                                                     label="" value={searchString} placeholder="Search Lead"

                                                     onkeyup={handleSearch} ></lightning-input>

                            </div>

                        </div> 

            </lightning-layout-item>

            

            </lightning-layout><br/>

        <div if:true={lstLead}>

            <table class="slds-table slds-table_bordered slds-border_left slds-border_right">

                <thead>

                  <tr class="slds-line-height_reset">

                    <th class="" scope="col">

                      <div class="slds-truncate" title="Name">Id</div>

                    </th>

                    <th class="" scope="col">

                      <div class="slds-truncate" title="Some Custom Column">Name</div>

                    </th>

                  </tr>

                </thead>

                <tbody>

                    <template for:each={lstLead} for:item="objLead" for:index="index">  

                        <tr key={objLead.Id}>

                            <td>

                                <div class="slds-p-left_small" key={objLead.Id} data-leadid = {objLead.Id} onclick={navigateToLead}>  

                            {objLead.Id} </div> 

                            </td>

                            <td><div class="slds-p-left_small" key={objLead.Id} data-leadid = {objLead.Id} onclick={navigateToLead}>  

                                {objLead.Name}  </div>

                            </td>

                        </tr>

                    </template>

                </tbody>

            </table>

              

        </div>

    </lightning-card>

</template>

searchFunctionalityInLWC.js

import { LightningElement,api } from 'lwc';

import { NavigationMixin } from 'lightning/navigation';

import serachLeadRecords from '@salesforce/apex/LeadController.getLeads';

export default class SearchFunctionalityInLWC extends NavigationMixin(LightningElement) {

    @api searchString='';

    @api errorMsg ='';

    @api lstLead =[];

    handleSearch(event) {

        this.searchString = event.target.value;

        console.log('search:',event.target.value);

        

        serachLeadRecords({leadName : this.searchString})

        .then(result => {

            console.log('Result:',result);

            this.lstLead = result;

        })

        .catch(error => {

            this.lstLead = undefined;

        }) 

    }

    navigateToLead(event) {

        const selectedRecordId = event.target.dataset.leadid;

        console.log('Event',selectedRecordId);

        this[NavigationMixin.Navigate]({

            type: 'standard__recordPage',

            attributes: {

                recordId: selectedRecordId,

                actionName: 'view',

            },

        });

    }

}

searchFunctionalityInLWC.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>52.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__RecordPage</target>

        <target>lightning__HomePage</target>

    </targets>

</LightningComponentBundle>

Output: