Search account dynamically through search key in lightning web component(LWC) | how To make dynamic custom/Search in lightning web component (LWC) Salesforce

Today i am working on how to search Account dynamically through search key input field from Account in lightning web component(LWC)

➡ To know more details about dynamic custom/Search in lwc, Click Here.

searchAccountLwc.html [Lightning Web Component]

<template> <lightning-card> <h3 slot="title"> <lightning-icon icon-name="standard:account" size="small"></lightning-icon> Search Account </h3> <p class="slds-p-horizontal_small"> <lightning-input type="search" class="slds-m-bottom_small" label="Search Account Name" onchange={handleKeyChange} value={accountName}></lightning-input> </p> <template for:each={accountList} for:item="accObj" for:index="index"> <option key={accObj.Id}>{accObj.Name}</option> </template> </lightning-card> </template>

searchAccountLwc.js [JavaScript File]

import { LightningElement, track, wire } from 'lwc'; import getAccounts from '@salesforce/apex/accountCreationControllerLwc.getAccountFrom'; const DELAY = 100; export default class SearchAccount extends LightningElement { accountName = ''; @track accountList= []; @wire (getAccounts,{actName:'$accountName'}) retrieveAccounts({error, data}){ if(data){ this.accountList=data; } else if(error){ } } handleKeyChange(event){ //this.accountName = event.target.value; const searchString = event.target.value; window.clearTimeout(this.delayTimeout); this.delayTimeout = setTimeout(() => { this.accountName = searchString; }, DELAY); } }

searchAccountLwc.js-meta.xml [MetaData File]

<?xml version="1.0" encoding="UTF-8"?> <lightningcomponentbundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiversion>48.0</apiVersion> <isexposed>true</isExposed> <targets> <target>lightning__AppPage</target> <target>lightning__RecordPage</target> <target>lightning__HomePage</target> <target>lightning__Tab</target> </targets> </LightningComponentBundle>

accountCreationControllerLwc.cls [Apex Controller File]

public with sharing class accountCreationControllerLwc { //Account search method @AuraEnabled(cacheable=true) public static List<account> getAccountFrom (String actName){ String KeyString = '%' + actName + '%'; return [Select Id, Name From Account Where Name like:KeyString]; } }

➡ To know more live demo in LWC, Use this link..