autocompleteKeys.html

<template>
    <div style="width: 800px; height: 600px">
        {selectedValue}
        <div class="slds-form-element">
            <label class="slds-form-element__label" for="combobox-id-16" id="combobox-label-id-130">Relate To</label>
            <div class="slds-form-element__control">
                <div class="slds-combobox_container">
                    <div class="slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open">
                        <div class="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right"
                            role="none">
                            <input type="text" class="slds-input slds-combobox__input slds-has-focus"
                                id="combobox-id-16" aria-activedescendant="option1" aria-autocomplete="list"
                                aria-controls="listbox-id-12" aria-expanded="true" aria-haspopup="listbox"
                                data-listid="listbox-id-12" autocomplete="off" role="combobox" placeholder="Search..."
                                onkeyup={handleKeyUp} />
                            <span
                                class="slds-icon_container slds-icon-utility-search slds-input__icon slds-input__icon_right">
                                <svg class="slds-icon slds-icon slds-icon_x-small slds-icon-text-default"
                                    aria-hidden="true">
                                    <use xlink:href="/_slds/icons/utility-sprite/svg/symbols.svg#search"></use>
                                </svg>
                            </span>
                        </div>
                        <div id="listbox-id-12" data-listid="listbox-id-12"
                            class="slds-dropdown slds-dropdown_length-5 slds-dropdown_fluid" role="listbox">
                            <ul class="slds-listbox slds-listbox_vertical" role="presentation">
                                <li role="presentation" class="slds-listbox__item" onclick={handleClick}
                                    data-value="option1">
                                    <div aria-selected="true" id="option1"
                                        class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small"
                                        role="option">
                                        <span class="slds-media__figure slds-listbox__option-icon"></span>
                                        <span class="slds-media__body">
                                            <span class="slds-truncate"
                                                title="Burlington Textiles Corp of America">Burlington Textiles Corp of
                                                America</span>
                                        </span>
                                    </div>
                                </li>
                                <li role="presentation" class="slds-listbox__item" onclick={handleClick}
                                    data-value="option2">
                                    <div id="option2"
                                        class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small"
                                        role="option">
                                        <span class="slds-media__figure slds-listbox__option-icon"></span>
                                        <span class="slds-media__body">
                                            <span class="slds-truncate" title="Dickenson plc">Dickenson plc</span>
                                        </span>
                                    </div>
                                </li>
                                <li role="presentation" class="slds-listbox__item" onclick={handleClick}
                                    data-value="option3">
                                    <div id="option3"
                                        class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small"
                                        role="option">
                                        <span class="slds-media__figure slds-listbox__option-icon"></span>
                                        <span class="slds-media__body">
                                            <span class="slds-truncate" title="Edge Communications">Edge
                                                Communications</span>
                                        </span>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

autocompleteKeys.js

import { LightningElement } from "lwc";

export default class Autocomplete extends LightningElement {
	currentIndex = -1;
	selectedValue;

	handleKeyUp(event) {
		// get the data listid value from the element
		const listId = event.currentTarget.dataset.listid;
		// get the element with role option below the data list
		const options = this.template.querySelectorAll(`[data-listid="${listId}"] [role="option"]`);

		// remove the slds-has-focus class from all options
		options.forEach((option) => {
			option.classList.remove("slds-has-focus");
		});

		// Detect arrow up and down keys and set focus to the previous or next element in the list of options
		if (event.key === "ArrowUp") {
			// decrement the current index up to 0
			this.currentIndex = Math.max(this.currentIndex - 1, 0);
		} else if (event.key === "ArrowDown") {
			// increment the current index up to the last index
			this.currentIndex = Math.min(this.currentIndex + 1, options.length - 1);
		} else if (event.key === "Enter") {
			// if the enter key is pressed, set the value of the input to the value of the focused option
			this.template.querySelectorAll(`[data-listid="${listId}"] li[role="presentation"]`)[this.currentIndex].click();
		}
		// set the focus to the current index adding the class slds-has-focus
		options[this.currentIndex].classList.add("slds-has-focus");
	}

	handleClick(event) {
		// remove the slds-has-focus class from all siblings role option child elements of the clicked element
		let prevSibling = event.currentTarget.previousElementSibling;
		while (prevSibling) {
			let option = prevSibling.querySelector("[role='option']");
			option?.classList.remove("slds-has-focus");
			prevSibling = prevSibling.previousElementSibling;
		}
		let nextSibling = event.currentTarget.nextElementSibling;
		while (nextSibling) {
			let option = nextSibling.querySelector("[role='option']");
			option?.classList.remove("slds-has-focus");
			nextSibling = nextSibling.nextElementSibling;
		}
		// get the data-value attribute
		const value = event.currentTarget.dataset.value;
		this.selectedValue = value;
		console.log(value);
	}
}

autocompleteKeys.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>54.0</apiVersion>
    <isExposed>false</isExposed>
</LightningComponentBundle>