How to display the records based on selected picklist value with event in LWC





Apex class
==========
public class AccountSearchController
{
    @AuraEnabled(cacheable=true)
    public static List<Account> displayAccountRecords(String searchKey)
    {
        System.debug('searchKey'+searchKey);
        List<Account> returnlist=new List<Account>();
        for(Account acc:[select Name,Industry from Account where Industry=:searchKey])
        {
            returnlist.add(acc);
        }
        return returnlist;
    }
}

childComponent.html
===================
<template>
    <template if:true={IndustryPicklistValues.data}>
        <lightning-combobox name="progress"
           label="Industry"
           value={value}
           placeholder="-Select-"
           options={IndustryPicklistValues.data.values}
           onchange={handleChange} >
        </lightning-combobox>
       </template>
</template>

childComponent.js
=================
import { LightningElement,wire,api } from 'lwc';
import { getPicklistValues,getObjectInfo} from 'lightning/uiObjectInfoApi';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import INDUSTRY_FIELD from '@salesforce/schema/Account.Industry';

export default class ChildComponent extends LightningElement {
    @api selectedIndustry;
    @wire(getObjectInfo, { objectApiName: ACCOUNT_OBJECT })
    objectInfo;

    @wire(getPicklistValues, { recordTypeId: '$objectInfo.data.defaultRecordTypeId', fieldApiName: INDUSTRY_FIELD})
    IndustryPicklistValues;
    handleChange(event){
        this.selectedIndustry=event.detail.value;
        const picklistcarryevent=new CustomEvent('picklistcarryevent',{
            detail:this.selectedIndustry

        });
        this.dispatchEvent(picklistcarryevent);

    }


}

parentComponent.html
====================
<template>
    <c-child-component onpicklistcarryevent={handlechange}>
    </c-child-component>
    <template if:true={records}>
        <table>
           <tr>
           <th>AccountName</th>
           <th>Industry</th>
           </tr>
           <template for:each={records} for:item="acc">
             <tr key={acc.Id}>
              <td>{acc.Name}</td>
              <td>{selectedval}</td>
             </tr>
          </template>
        </table>
       </template>
</template>

parentComponent.js
==================
/* eslint-disable no-console */
import { LightningElement,wire,api } from 'lwc';
import displayAccountRecords from '@salesforce/apex/AccountSearchController.displayAccountRecords';


export default class ParentComponent extends LightningElement {
    @api selectedval;
    @api records;
    @api errors;
    @wire(displayAccountRecords, {searchKey:'$selectedval'})
    wiredAccount({ error, data }) {
        if (data) {
            this.records = data;
            this.errors = undefined;
       
        } else {
            this.errors = error;
            this.records = undefined;
   
        }
    }
    handlechange(event){
        this.selectedval=event.detail;
        console.log('selected industry'+this.selectedval);
    }

}












Comments