<div class="container py-5 d-flex justify-content-center">
  <div class="bsac-wrap position-relative">
    <input type="text" class="form-control form-control-lg" id="bsacInput" placeholder="Search fruits and vegetables..." autocomplete="off">
    <div class="list-group position-absolute w-100 shadow-sm d-none" id="bsacList"></div>
  </div>
</div>

.bsac-wrap { width: 420px; }
#bsacList { top: 100%; left: 0; z-index: 10; max-height: 260px; overflow-y: auto; }
#bsacList .list-group-item.active-suggestion { background-color: #f1f3f5; }
#bsacList mark { background-color: #fff3a3; padding: 0; }

const ITEMS = [
  'Apple', 'Apricot', 'Avocado', 'Banana', 'Blueberry', 'Broccoli',
  'Cabbage', 'Carrot', 'Cauliflower', 'Cherry', 'Cucumber', 'Date',
  'Eggplant', 'Fig', 'Grape', 'Guava', 'Kale', 'Kiwi', 'Lemon',
  'Lettuce', 'Mango', 'Mushroom', 'Onion', 'Orange', 'Papaya',
  'Peach', 'Pear', 'Pepper', 'Pineapple', 'Potato', 'Pumpkin',
  'Radish', 'Spinach', 'Strawberry', 'Tomato', 'Watermelon',
];

const input = document.getElementById('bsacInput');
const list = document.getElementById('bsacList');
let matches = [];
let activeIndex = -1;

function escapeRegExp(str) {
  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

function highlight(text, query) {
  const re = new RegExp('(' + escapeRegExp(query) + ')', 'ig');
  return text.replace(re, '<mark>$1</mark>');
}

function render(query) {
  list.innerHTML = '';
  activeIndex = -1;

  if (!query) {
    list.classList.add('d-none');
    return;
  }

  if (matches.length === 0) {
    list.classList.remove('d-none');
    const empty = document.createElement('div');
    empty.className = 'list-group-item text-muted small';
    empty.textContent = 'No matches found for "' + query + '"';
    list.appendChild(empty);
    return;
  }

  matches.forEach((item, i) => {
    const row = document.createElement('button');
    row.type = 'button';
    row.className = 'list-group-item list-group-item-action';
    row.innerHTML = highlight(item, query);
    row.dataset.index = String(i);
    row.addEventListener('click', () => selectItem(item));
    list.appendChild(row);
  });
  list.classList.remove('d-none');
}

function setActive(index) {
  const rows = Array.from(list.querySelectorAll('.list-group-item-action'));
  rows.forEach(r => r.classList.remove('active-suggestion'));
  if (index >= 0 && index < rows.length) {
    rows[index].classList.add('active-suggestion');
    rows[index].scrollIntoView({ block: 'nearest' });
  }
  activeIndex = index;
}

function selectItem(item) {
  input.value = item;
  list.classList.add('d-none');
  matches = [];
}

function closeList() {
  list.classList.add('d-none');
  activeIndex = -1;
}

input.addEventListener('input', () => {
  const query = input.value.trim();
  matches = query
    ? ITEMS.filter(item => item.toLowerCase().includes(query.toLowerCase()))
    : [];
  render(query);
});

input.addEventListener('keydown', e => {
  const rows = Array.from(list.querySelectorAll('.list-group-item-action'));
  if (list.classList.contains('d-none') || rows.length === 0) return;

  if (e.key === 'ArrowDown') {
    e.preventDefault();
    setActive(Math.min(activeIndex + 1, rows.length - 1));
  } else if (e.key === 'ArrowUp') {
    e.preventDefault();
    setActive(Math.max(activeIndex - 1, 0));
  } else if (e.key === 'Enter') {
    if (activeIndex >= 0 && matches[activeIndex]) {
      e.preventDefault();
      selectItem(matches[activeIndex]);
    }
  } else if (e.key === 'Escape') {
    closeList();
  }
});

// Clicking anywhere outside the input/list closes the suggestion list,
// matching how native browser autocomplete dropdowns behave.
document.addEventListener('click', e => {
  if (!e.target.closest('.bsac-wrap')) closeList();
});