Combobox

<div class="combobox" data-boodoo="combobox">
  <div class="combobox-input-wrapper">
    <input type="text" class="form-control combobox-input" id="fruitInput" name="fruitInput" placeholder="Search..." autocomplete="off">
    <button type="button" class="combobox-clear" data-boodoo-combobox-clear aria-label="Clear"><span>&times;</span></button>
  </div>
  <ul class="combobox-menu" data-boodoo-combobox-menu>
    <li class="combobox-item" data-value="apple"><span>Apple</span></li>
    <li class="combobox-item" data-value="banana"><span>Banana</span></li>
    <li class="combobox-item" data-value="cherry"><span>Cherry</span></li>
    <li class="combobox-empty"><span>No options match</span></li>
  </ul>
</div>

import { Combobox } from 'boodoo';

const element = document.getElementById('demoCombobox');
const combobox = Combobox.getOrCreateInstance(element);

// Listen to selection events
element.addEventListener('select.boodoo.combobox', (e) => {
  console.log('Selected value:', e.detail.value);
});

// Clear programmatically
combobox.clear();