Search Autocomplete Feature | HTML, CSS & JavaScript

Search Autocomplete Feature with HTML, CSS & JavaScript

30 DAYS 30 PROJECT CHALLENGE

Day #04

Project Overview

A Search Autocomplete feature built using HTML, CSS, and JavaScript that provides real-time suggestions as users type.
The project enhances user experience by dynamically filtering data, highlighting matching text, and supporting keyboard navigation for faster and more accessible searching.

Key Features

Displays real-time search suggestions based on user input.
Highlighted matching text within suggestions.
Keyboard navigation using arrow keys and Enter.
Click-to-select suggestion support.
Debounce mechanism to improve performance.
Smooth and responsive UI design.
Automatically hides suggestions when clicking outside.

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Search Autocomplete</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <div class="search-box">
    <h2>Search Autocomplete</h2>

    <input
      type="text"
      id="searchInput"
      placeholder="Search skills..."
      autocomplete="off"
    />

    <ul id="suggestions"></ul>
  </div>

  <script src="script.js"></script>
</body>
</html>

CSS Code

* {
  box-sizing: border-box;
  font-family: "Segoe UI", sans-serif;
}

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #042453;
}

.search-box {
  background: #fff;
  width: 340px;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

h2 {
  text-align: center;
  margin-bottom: 15px;
}

input {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #ccc;
  outline: none;
}

input:focus {
  border-color: #4f46e5;
}

ul {
  list-style: none;
  margin-top: 8px;
  padding: 0;
  max-height: 200px;
  overflow-y: auto;
  border-radius: 8px;
}

li {
  padding: 10px;
  cursor: pointer;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

li:hover,
li.active {
  background: #eef2ff;
}

.highlight {
  color: #4f46e5;
  font-weight: bold;
}

Javascript Code

const input = document.getElementById("searchInput");
const suggestions = document.getElementById("suggestions");

const items = [
  "HTML",
  "CSS",
  "JavaScript",
  "React",
  "Angular",
  "Vue",
  "Node.js",
  "Express",
  "MongoDB",
  "Firebase",
  "Bootstrap",
  "Tailwind CSS",
  "Python",
  "Django",
  "Flask"
];

let activeIndex = -1;
let debounceTimer;

/* Debounce function */
function debounce(callback, delay) {
  clearTimeout(debounceTimer);
  debounceTimer = setTimeout(callback, delay);
}

/* Handle input */
input.addEventListener("input", () => {
  debounce(showSuggestions, 200);
});

function showSuggestions() {
  const value = input.value.toLowerCase();
  suggestions.innerHTML = "";
  activeIndex = -1;

  if (!value) return;

  const filtered = items.filter(item =>
    item.toLowerCase().includes(value)
  );

  filtered.forEach(item => {
    const li = document.createElement("li");
    li.innerHTML = highlightMatch(item, value);

    li.addEventListener("click", () => {
      input.value = item;
      suggestions.innerHTML = "";
    });

    suggestions.appendChild(li);
  });
}

/* Highlight matching text */
function highlightMatch(text, value) {
  const regex = new RegExp(`(${value})`, "gi");
  return text.replace(regex, `<span class="highlight">$1</span>`);
}

/* Keyboard navigation */
input.addEventListener("keydown", e => {
  const listItems = document.querySelectorAll("#suggestions li");

  if (e.key === "ArrowDown") {
    activeIndex++;
    if (activeIndex >= listItems.length) activeIndex = 0;
  }

  if (e.key === "ArrowUp") {
    activeIndex--;
    if (activeIndex < 0) activeIndex = listItems.length - 1;
  }

  if (e.key === "Enter" && activeIndex > -1) {
    input.value = listItems[activeIndex].innerText;
    suggestions.innerHTML = "";
    return;
  }

  listItems.forEach(item => item.classList.remove("active"));
  if (listItems[activeIndex]) {
    listItems[activeIndex].classList.add("active");
  }
});

/* Close suggestions on outside click */
document.addEventListener("click", e => {
  if (!e.target.closest(".search-box")) {
    suggestions.innerHTML = "";
  }
});