Implement Autocomplete Widget

You are required to Implement an Autocomplete component.

The autocomplete is a normal text input enhanced by a panel of suggested options.

This is initial HTML structure:

<div class="autocomplete">
  <input id="search" type="search" autocomplete="off" />
  <ul></ul>
</div>

Requirements

• Show suggestions when the user starts writing
• By clicking on an option put it into the input
• By clicking on the outside of the suggestions box, hide it

Solution

// Select input and unordered list elements from the DOM
const input = document.querySelector("#autocomplete input");
const ul = document.querySelector("#autocomplete ul");

// Sample data array for autocomplete suggestions
const data = ["apple", "banana", "cherry", "date"];

// Function to show suggestions based on the input
const showSuggestions = (arr) => {
  // Reduce direct DOM manipulation
  const listHTML = arr.map((item) => `<li class="list-item">${item}</li>`).join("");
  ul.innerHTML = listHTML;
  ul.style.display = listHTML ? "block" : "none";
};

// Function to handle click events on list items
const onItemClick = (evt) => {
  // Directly handle the click event on UL instead of individual LI
  if (evt.target.tagName === "LI") {
    input.value = evt.target.textContent;
    ul.innerHTML = "";
  }
};

// Event listener for input changes
input.addEventListener("input", (evt) => {
  const query = evt.target.value.toLowerCase();
  const suggestions = query ? data.filter((item) => item.toLowerCase().startsWith(query)) : [];
  showSuggestions(suggestions);
});

// Event listener for click events on the unordered list
ul.addEventListener("click", onItemClick);

// Event listener to close the suggestion list when clicking outside the autocomplete area
document.addEventListener("click", (event) => {
  if (!event.target.closest("#autocomplete")) {
    ul.innerHTML = "";
  }
});