Search Record Functionality in Lightning Web Component (LWC)

Create a 'Search Record Functionality' in light web component. Where we will display from custom Object(scoreCard__c) record data using 'Lightning:dataTable' web component.
In this example we will search custom sObject(scoreCard__c) records with an lightning input field.

scoreCardController.cls [Apex Controller]
recordSearchLwc.html [Lightning Web Component]

  
    <template>

<lightning-card title="Search Record and Display" icon-name="custom:custom21">
    <div class="slds-p-around--medium">
        <div class="slds-m-bottom_small" style="display:block;">
            <lightning-layout>  
            <lightning-layout-item>
                <lightning-input type="text"
                value={keyVal}
                label="Search Name"
                onchange={seachKeyAction}
                ></lightning-input>
            </lightning-layout-item>
            
            <lightning-layout-item class="slds-m-top--large slds-m-left--small">
            <lightning-button label="Search"
            onclick={searchBtnAction}
            variant="brand"></lightning-button>
            </lightning-layout-item>
            
        </lightning-layout> 
        </div>
<lightning-layout class="slds-p-around--medium">
        <table class="slds-table slds-table_header-fixed slds-table_bordered slds-table_col-bordered 

slds-table_resizable-cols">
            <thead>
<tr>
                    <th style="padding:5px;">Name</th>
                    <th style="padding:5px;">Phone</th>
                    <th style="padding:5px;">Email</th>
                    <th style="padding:5px;">Designations</th>
                    <th style="padding:5px;">Target Actuals</th>
                </tr>
</thead>  
            <tbody>
            <template for:each={contactData} for:item="cardItem">
<tr class="slds-hint-parent" key={cardItem.Id}>
                    <td>
                    <div class="slds-truncate">
{cardItem.Name}</div>
</td>
                    <td>
                        <div class="slds-truncate">
                            <lightning-formatted-phone value={cardItem.Phone_No__c}></lightning-

formatted-phone>
                    </div>
</td>
                    <td>
                        <div class="slds-truncate">
                            <lightning-formatted-email value={cardItem.designations__c}></lightning-

formatted-email>
                        </div>
</td>
                    <td>
                        <div class="slds-truncate">
<lightning-formatted-text value=

{cardItem.designations__c}></lightning-formatted-text></div>
</td>
                    <td>                        
                        <div class="slds-truncate">
<lightning-formatted-text value=

{cardItem.targetVSActuals__c}></lightning-formatted-text></div>
</td>
                    
                </tr>
</template>
            </tbody>
            </table>
</lightning-layout>
</div>
</lightning-card>


</template>

recordSearchLwc.js [JavaScript File]

  
   import { LightningElement, track } from 'lwc';

import getscoreList from '@salesforce/apex/scoreCardController.getscoreList';
import {ShowToastEvent} from 'lightning/platformShowToastEvent';
export default class RecordSearchLwc extends LightningElement {

@track keyVal  = '';
@track contactData; 
seachKeyAction(event){
  this.keyVal =  event.target.value;
}

searchBtnAction(){
  if(this.keyVal !== '' ){
    getscoreList({searchKey:this.keyVal})
    .then(result => {
       this.contactData = result;
    })
    .catch(error => {
        /*eslint-disabled no-console*/
        console.log('error fatching.');
        const event = new ShowToastEvent({
            title: 'Error',
            variant: 'error',
            message: error.body.message,
        });
        this.dispatchEvent(event);
        // reset contacts var with null   
        this.contactData = null;

    });
  }
  else {
    // fire toast event if input field is blank
    const event = new ShowToastEvent({
        variant: 'error',
        message: 'Search text missing..',
    });
    this.dispatchEvent(event);
  }


}


}

recordSearchLwc.js-meta.xml [MetaData File]

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