[SalesForce] How to get the event Key Id and Value in LWC

I have a public site in LWC, which has input Fields.

In that i have search input field, this will fetch the Name from custom object( Basically I'm trying to achieve to do a custom look up).

Value is displaying below to the Input field based on the text which i entered, But When i select the any one of the result value It print's undefined.

On select the value, want to get the Id and display the Name in the field, Also want to clear the result set.

Below is my code, Can anyone Please guide me on this. Thanks in Advance.

JS:

 handleselectSchool(event) {
    alert("in");
    alert(event.detail);
    alert(event.currentTarget.dataset.Id);
    alert(event.currentTarget.dataset.name);
    // alert(event.currentTarget.dataset.Id);
    // alert(event.target.dataset.menuItemId); 
  }


<div class="slds-size_1-of-2">
    <div class="slds-text-align_center slds-m-around_x-small">
        <lightning-input type="search" onchange={handleKeyChangeGetSchool}
            class="slds-m-bottom_small" value={schoolVal} label="School">
        </lightning-input>
        <template if:true={schoolData}>
            <template for:each={schoolData} for:item="sc" for:index="index">
                <li class="slds-nav-vertical__item" key={sc.Id}
                    data-id={sc.Id} data-name={sc.Name}>

                    <a class="slds-nav-vertical__action"
                        onclick={handleselectSchool} aria-current="true">
                        <lightning-icon icon-name="standard:education"
                            alternative-text="skill" title="Account"
                            size="x-small">
                        </lightning-icon>
                        &nbsp; {sc.Name}
                    </a>
                </li>
            </template>
            <!-- <lightning-datatable key-field="Id" data={schoolData}
                    columns={schoolcolumns} hide-checkbox-column="true"
                    show-row-number-column="false">
                </lightning-datatable> -->
        </template>
    </div>
</div>

Best Answer

You just need to put the attributes on the link itself:

<a class="slds-nav-vertical__action"
    data-id={sc.Id} data-name={sc.Name}
    onclick={handleselectSchool} aria-current="true">