static/js/script.js

// For the normal product search autocomplete
const input = document.getElementById('search-input');
const resultsBox = document.getElementById('autocomplete-results');

function showResults(results) {
  if (!results || results.length === 0) {
    resultsBox.style.display = 'none';
    return;
  }
  let html = '';
  results.forEach(item => {
    html += `<div class="autocomplete-item" onclick="goToProduct(${item.id})">${item.name}</div>`;
  });
  resultsBox.innerHTML = html;
  resultsBox.style.display = 'block';
}

function goToProduct(itemId) {
  window.location.href = '/product/' + itemId;
}

if (input && resultsBox) {
  input.addEventListener('input', function() {
    const q = this.value.trim();
    if (q.length < 1) {
      resultsBox.style.display = 'none';
      return;
    }
    fetch(`/autocomplete?q=${encodeURIComponent(q)}`)
      .then(resp => resp.json())
      .then(data => {
        showResults(data);
      })
      .catch(err => console.error(err));
  });
}