PARENT COMPONENT

<template>
    <lightning-card title='Custom Lookup2'>
    <template if:false={selectedRecord} >
        <div class="slds-m-around_small" >
            <lightning-input value={inputVal} onchange={HandleChange2}></lightning-input>
        </div>
    </template>
    
    <template if:false={selectedRecord} >
        <template if:true={records}>
            <template for:each={records} for:item="rec" >
                <c-record-list key={rec.Id} record={rec} iconname={iconname}
                    onselect={handleSelect}></c-record-list>
            </template>
        </template>
    </template>
    <div class="slds-p-around_x-small">
        <template if:true={selectedRecord}>
            <div class="slds-combobox__form-element slds-input-has-icon 
                                    slds-input-has-icon_left-right" role="none">
                <span class="slds-icon_container
                                        slds-icon-standard-account 
                                        slds-combobox__input-entity-icon" title="Account">
                    <lightning-icon icon-name={iconname}></lightning-icon>
                </span>
                <input class="slds-input slds-combobox__input
                                   slds-combobox__input-value" id="combobox-id-5" aria-controls="listbox-id-5"
                    autocomplete="off" role="textbox" type="text" placeholder="Select an Option" readonly=""
                    value={selectedRecord.Name} disabled />
                <button class="sicon_container slds-button slds-button_icon 
                                           slds-input__icon slds-input__icon_right" title="Remove selected option"
                    onclick={handleRemove}>
                    <lightning-icon icon-name="utility:close" size="small">
    
                    </lightning-icon>
                    <span class="slds-assistive-text">Remove selected option</span>
                </button>
            </div>
        </template>
    </div>
    </lightning-card>
</template>

JS
import { LightningElement,api,track } from 'lwc';
import findRecords from '@salesforce/apex/lookupController.findRecords'
export default class CustomLookup2 extends LightningElement {
 
    @api iconname = 'standard:account';
    @track records;
    @track errors;
    @track selectedRecord;
    HandleChange2(event){
        const searchValue = event.target.value;
       
        findRecords({
           
            searchValue : searchValue,
           
        })
        .then( result => {
            console.log(' Records Are ', result);
            this.records  = result;
            this.errors = undefined;
        })
        .catch(error => {
            this.errors = error;
            this.records = undefined;
        });
    }
    handleSelect(event){
        const recordId = event.detail;
        const selectedRec = this.records.find(
            record => record.Id === recordId
        );
        console.log(' Selected Record ', selectedRec);
        this.selectedRecord = selectedRec;
    }
    handleRemove(){
        this.selectedRecord = undefined;
        this.errors = undefined;
        this.records = undefined;
    }

CHILD COMPONENT

<template>
    <div>
        <div class="slds-grid slds-wrap 
                                slds-dropdown_length-with-icon-7 
                                slds-dropdown_fluid
                                slds-p-left_small">
            <div class="slds-col slds-size_4-of-4 ">
                <ul class="slds-listbox slds-listbox_vertical" role="presentation">
                    <li role="presentation" class="slds-listbox__item">
                        <div class="slds-media slds-listbox__option 
                                                                slds-listbox__option_entity 
                                                                slds-listbox__option_has-meta" role="option"
                            onclick={handleSelect}>
                            <span class="slds-media__figure slds-listbox__option-icon">
                                <lightning-icon icon-name={iconname} size="small"></lightning-icon>
                            </span>
                            <span class="slds-media__body" style="padding-top: 9px;font-weight: 600;">
                                <span class="slds-listbox__option-text 
                                                                         slds-listbox__option-text_entity">
                                    {record.Name}
                                </span>
                            </span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

JS

import { LightningElement,api } from 'lwc';
export default class RecordList extends LightningElement {
    @api record;
    @api iconname;
    handleSelect(){
        const selectEvent = new CustomEvent(
            'select',
            {
                detail : this.record.Id
            }
        );
        this.dispatchEvent(selectEvent);
    }
}


APEX
public with sharing class lookupController {

     @AuraEnabled
    public static List<Account> findRecords( String searchValue){
        String key = '%' + searchValue + '%';
        String Query = 'Select Id,Name FROM Account Where Name LIKE : key ';
        List<Account> sobjectList = Database.query(Query);
        return sobjectList;
    }
}