Combobox

<!-- Combobox code -->
<label for="land-combo">
  Kies je land:
</label>
<div class="combobox-container">
  <input type="text" id="land-combo" class="combobox" role="combobox" aria-expanded="false" aria-controls="land-list" aria-activedescendant="" aria-autocomplete="list" autocomplete="country" placeholder="Type om te zoeken...">
  <ul class="combobox-list" id="land-list" role="listbox">
    <li class="combobox-option" role="option" aria-selected="false">
      Nederland
    </li>
    <li class="combobox-option" role="option" aria-selected="false">
      België
    </li>
    <li class="combobox-option" role="option" aria-selected="false">
      Duitsland
    </li>
    <li class="combobox-option" role="option" aria-selected="false">
      Frankrijk
    </li>
  </ul>
</div>

/* Combobox stijlen */
.combobox-container {
  position: relative;
  width: 300px;
}

.combobox {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid;
}

.combobox-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  background: white;
  border: 1px solid;
  border-top: none;
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
  display: none;
}

.combobox-list.show {
  display: block;
}

.combobox-option {
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid;
}

.combobox-option:hover,
.combobox-option.focused {
  background: black;
  color: white;
}

.combobox-option[aria-selected="true"] {
  background: grey;
  color: white;
} 

// Combobox functionaliteit
class Combobox {
  constructor(container) {
    this.container = typeof container === 'string' ?
      document.querySelector(container) : container;

    if (!this.container) return;

    this.input = this.container.querySelector('.combobox');
    this.listbox = this.container.querySelector('.combobox-list');
    this.options = Array.from(this.container.querySelectorAll('.combobox-option'));
    this.focusIndex = -1;
    this.selectedIndex = -1;
    this.uniqueId = Date.now().toString(36);

    // Stop als essentiële elementen ontbreken
    if (!this.input || !this.listbox || this.options.length === 0) return;

    this.setupAccessibility();
    this.bindEvents();
  }

  setupAccessibility() {
    // Zet aria-attributen voor het invoerveld
    this.input.setAttribute('aria-expanded', 'false');
    this.input.setAttribute('aria-haspopup', 'listbox');
    this.input.setAttribute('aria-autocomplete', 'list');
    this.input.setAttribute('aria-controls', this.listbox.id);

    // Geef elke optie een uniek ID
    this.options.forEach((option, index) => {
      option.setAttribute('id', `opt-${this.uniqueId}-${index}`);
      option.setAttribute('aria-selected', 'false');
    });
  }

  bindEvents() {
    // Invoerveld events
    this.input.addEventListener('input', () => this.handleInput());
    this.input.addEventListener('keydown', (e) => this.handleKeydown(e));
    this.input.addEventListener('focus', () => this.openList());
    this.input.addEventListener('blur', () => {
      // Korte delay voor klik events op opties
      setTimeout(() => this.closeList(), 150);
    });

    // Optie events
    this.options.forEach((option, index) => {
      option.addEventListener('click', () => this.selectOption(index));
      option.addEventListener('mouseenter', () => this.setFocusOnOption(index));
    });
  }

  handleInput() {
    const searchText = this.input.value.toLowerCase();
    let hasVisibleOptions = false;

    // Filter opties op basis van input
    this.options.forEach(option => {
      const optionText = option.textContent.toLowerCase();
      const matches = optionText.includes(searchText);

      option.style.display = matches ? 'block' : 'none';
      if (matches) hasVisibleOptions = true;
    });

    // Reset focus en toon lijst als er opties zijn
    this.focusIndex = -1;
    this.updateFocus();

    if (hasVisibleOptions) {
      this.openList();
    } else {
      this.closeList();
    }
  }

  handleKeydown(e) {
    const visibleOptions = this.getVisibleOptions();

    switch (e.key) {
      case 'ArrowDown':
        e.preventDefault();
        this.focusIndex = Math.min(this.focusIndex + 1, visibleOptions.length - 1);
        this.updateFocus();
        this.openList();
        break;

      case 'ArrowUp':
        e.preventDefault();
        this.focusIndex = Math.max(this.focusIndex - 1, -1);
        this.updateFocus();
        break;

      case 'Enter':
        e.preventDefault();
        if (this.focusIndex >= 0) {
          const optionIndex = this.options.indexOf(visibleOptions[this.focusIndex]);
          this.selectOption(optionIndex);
        }
        break;

      case 'Escape':
        this.closeList();
        this.input.blur();
        break;

      case 'Tab':
        this.closeList();
        break;
    }
  }

  setFocusOnOption(index) {
    // Zet focus op specifieke optie (voor hover)
    const visibleOptions = this.getVisibleOptions();
    const visibleIndex = visibleOptions.indexOf(this.options[index]);

    if (visibleIndex >= 0) {
      this.focusIndex = visibleIndex;
      this.updateFocus();
    }
  }

  updateFocus() {
    const visibleOptions = this.getVisibleOptions();

    // Verwijder focus styling van alle opties
    this.options.forEach(option => {
      option.classList.remove('focused');
    });

    // Zet focus op actieve optie
    if (this.focusIndex >= 0 && visibleOptions[this.focusIndex]) {
      const focusedOption = visibleOptions[this.focusIndex];
      focusedOption.classList.add('focused');
      this.input.setAttribute('aria-activedescendant', focusedOption.id);
    } else {
      this.input.removeAttribute('aria-activedescendant');
    }
  }

  selectOption(index) {
    // Reset vorige selectie
    this.options.forEach(option => {
      option.setAttribute('aria-selected', 'false');
    });

    // Selecteer nieuwe optie
    const selectedOption = this.options[index];
    this.input.value = selectedOption.textContent.trim();
    selectedOption.setAttribute('aria-selected', 'true');

    this.selectedIndex = index;
    this.closeList();
    this.input.focus();

    // Trigger change event voor formulier integratie
    this.input.dispatchEvent(new Event('change', {
      bubbles: true
    }));
  }

  getVisibleOptions() {
    return this.options.filter(option => option.style.display !== 'none');
  }

  openList() {
    this.listbox.classList.add('show');
    this.input.setAttribute('aria-expanded', 'true');
  }

  closeList() {
    this.listbox.classList.remove('show');
    this.input.setAttribute('aria-expanded', 'false');
    this.focusIndex = -1;
    this.updateFocus();
  }
}

// Auto-initialisatie voor alle comboboxen
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.combobox-container').forEach(container => {
    new Combobox(container);
  });
});