Autocomplete

Search input with dropdown suggestions, groups, highlights, multi-select tags, and keyboard navigation.

Basic Autocomplete

Preview

<div class="autocomplete">
  <input class="autocomplete-input" placeholder="Search countries..." value="Uni" />
  <div class="autocomplete-dropdown autocomplete-dropdown-open">
    <ul class="autocomplete-list">
      <li class="autocomplete-item autocomplete-item-active">
        <div class="autocomplete-item-content">
          <div class="autocomplete-item-label"><span class="autocomplete-highlight">Uni</span>ted States</div>
        </div>
      </li>
      <li class="autocomplete-item">
        <div class="autocomplete-item-content">
          <div class="autocomplete-item-label"><span class="autocomplete-highlight">Uni</span>ted Kingdom</div>
        </div>
      </li>
      <li class="autocomplete-item">
        <div class="autocomplete-item-content">
          <div class="autocomplete-item-label"><span class="autocomplete-highlight">Uni</span>ted Arab Emirates</div>
        </div>
      </li>
    </ul>
  </div>
</div>

Requires: ux.min.css

<div class="relative w-full min-w-[200px]">
  <input class="w-full h-[44px] px-3 pr-10 text-base border border-base-300 rounded-field bg-base-100 outline-none focus:border-primary focus:ring-3 focus:ring-primary/15" placeholder="Search..." value="Uni" />
  <div class="absolute left-0 right-0 top-[calc(100%+4px)] z-100 max-h-[300px] bg-base-100 border border-base-300 rounded-box shadow-lg overflow-hidden p-1">
    <div class="flex items-center gap-2 min-h-[44px] px-3 py-2 text-[0.9375rem] rounded-field bg-base-200 cursor-pointer">
      <span><mark class="bg-warning/25 font-semibold rounded-sm px-px">Uni</mark>ted States</span>
    </div>
    <!-- more items... -->
  </div>
</div>

Requires: tw.min.css

// Filter on input:
// input.addEventListener('input', (e) => {
//   const q = e.target.value.toLowerCase();
//   items.forEach(item => item.hidden = !item.textContent.toLowerCase().includes(q));
//   dropdown.classList.toggle('autocomplete-dropdown-open', q.length > 0);
// });
// Keyboard: ArrowDown/Up to navigate, Enter to select, Escape to close

With Icons & Descriptions

Preview

<div class="autocomplete">
  <input class="autocomplete-input" placeholder="Search users..." />
  <div class="autocomplete-dropdown autocomplete-dropdown-open">
    <ul class="autocomplete-list">
      <li class="autocomplete-item">
        <div class="autocomplete-item-icon">
          <svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
        </div>
        <div class="autocomplete-item-content">
          <div class="autocomplete-item-label">Jane Cooper</div>
          <div class="autocomplete-item-description">jane@example.com</div>
        </div>
      </li>
      <li class="autocomplete-item autocomplete-item-selected">
        <div class="autocomplete-item-icon">
          <svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
        </div>
        <div class="autocomplete-item-content">
          <div class="autocomplete-item-label">John Smith</div>
          <div class="autocomplete-item-description">john@example.com</div>
        </div>
      </li>
    </ul>
  </div>
</div>

Requires: ux.min.css

<div class="relative w-full min-w-50">
  <input class="w-full h-11 px-3 pr-10 text-base border border-base-300 rounded-field bg-base-100 outline-none focus:border-primary focus:ring-3 focus:ring-primary/15" placeholder="Search users..." />
  <div class="absolute left-0 right-0 top-[calc(100%+4px)] z-100 max-h-75 bg-base-100 border border-base-300 rounded-box shadow-lg overflow-hidden p-1">
    <div class="flex items-center gap-2 min-h-11 px-3 py-2 text-[0.9375rem] rounded-field cursor-pointer hover:bg-base-200">
      <div class="shrink-0 w-6 h-6 text-base-content/60">
        <svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
      </div>
      <div class="flex-1 min-w-0">
        <div class="truncate">Jane Cooper</div>
        <div class="text-[0.8125rem] text-base-content/50 truncate">jane@example.com</div>
      </div>
    </div>
    <div class="flex items-center gap-2 min-h-11 px-3 py-2 text-[0.9375rem] rounded-field cursor-pointer bg-primary/10 text-primary">
      <div class="shrink-0 w-6 h-6 text-base-content/60">
        <svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
      </div>
      <div class="flex-1 min-w-0">
        <div class="truncate">John Smith</div>
        <div class="text-[0.8125rem] text-base-content/50 truncate">john@example.com</div>
      </div>
    </div>
  </div>
</div>

Requires: tw.min.css

// No additional JS for static display

Grouped Results

Preview

<div class="autocomplete">
  <input class="autocomplete-input" placeholder="Search..." />
  <div class="autocomplete-dropdown autocomplete-dropdown-open">
    <ul class="autocomplete-list">
      <li class="autocomplete-group">
        <div class="autocomplete-group-label">Fruits</div>
      </li>
      <li class="autocomplete-item">
        <div class="autocomplete-item-content">
          <div class="autocomplete-item-label">Apple</div>
        </div>
      </li>
      <li class="autocomplete-item">
        <div class="autocomplete-item-content">
          <div class="autocomplete-item-label">Banana</div>
        </div>
      </li>
      <li class="autocomplete-group">
        <div class="autocomplete-group-label">Vegetables</div>
      </li>
      <li class="autocomplete-item">
        <div class="autocomplete-item-content">
          <div class="autocomplete-item-label">Carrot</div>
        </div>
      </li>
    </ul>
    <div class="autocomplete-footer">
      <div class="autocomplete-footer-hint"><kbd>↑↓</kbd> navigate</div>
      <div class="autocomplete-footer-hint"><kbd>↵</kbd> select</div>
      <div class="autocomplete-footer-hint"><kbd>esc</kbd> close</div>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="relative w-full min-w-50">
  <input class="w-full h-11 px-3 pr-10 text-base border border-base-300 rounded-field bg-base-100 outline-none focus:border-primary focus:ring-3 focus:ring-primary/15" placeholder="Search..." />
  <div class="absolute left-0 right-0 top-[calc(100%+4px)] z-100 max-h-75 bg-base-100 border border-base-300 rounded-box shadow-lg overflow-hidden">
    <ul class="m-0 p-1 list-none max-h-75 overflow-y-auto">
      <li class="pt-2">
        <div class="px-3 py-2 text-[0.6875rem] font-semibold uppercase text-base-content/50 tracking-wide">Fruits</div>
      </li>
      <li class="flex items-center gap-2 min-h-11 px-3 py-2 text-[0.9375rem] rounded-field cursor-pointer hover:bg-base-200">
        <div class="flex-1 min-w-0"><div class="truncate">Apple</div></div>
      </li>
      <li class="flex items-center gap-2 min-h-11 px-3 py-2 text-[0.9375rem] rounded-field cursor-pointer hover:bg-base-200">
        <div class="flex-1 min-w-0"><div class="truncate">Banana</div></div>
      </li>
      <li class="pt-2">
        <div class="px-3 py-2 text-[0.6875rem] font-semibold uppercase text-base-content/50 tracking-wide">Vegetables</div>
      </li>
      <li class="flex items-center gap-2 min-h-11 px-3 py-2 text-[0.9375rem] rounded-field cursor-pointer hover:bg-base-200">
        <div class="flex-1 min-w-0"><div class="truncate">Carrot</div></div>
      </li>
    </ul>
    <div class="flex items-center justify-between px-3 py-2 text-xs text-base-content/50 bg-base-200 border-t border-base-300">
      <div class="flex items-center gap-1"><kbd class="inline-flex items-center justify-center min-w-5 h-4.5 px-1 text-[0.6875rem] bg-base-100 border border-base-300 rounded">&#8593;&#8595;</kbd> navigate</div>
      <div class="flex items-center gap-1"><kbd class="inline-flex items-center justify-center min-w-5 h-4.5 px-1 text-[0.6875rem] bg-base-100 border border-base-300 rounded">&#8629;</kbd> select</div>
      <div class="flex items-center gap-1"><kbd class="inline-flex items-center justify-center min-w-5 h-4.5 px-1 text-[0.6875rem] bg-base-100 border border-base-300 rounded">esc</kbd> close</div>
    </div>
  </div>
</div>

Requires: tw.min.css

// Arrow keys navigate items, Enter selects, Escape closes dropdown

Multi-Select Tags

Preview

React Vue

<div class="autocomplete">
  <div class="autocomplete-tags">
    <span class="autocomplete-tag">
      React
      <button class="autocomplete-tag-remove">&times;</button>
    </span>
    <span class="autocomplete-tag">
      Vue
      <button class="autocomplete-tag-remove">&times;</button>
    </span>
    <input class="autocomplete-tags-input" placeholder="Add framework..." />
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-wrap gap-1 p-1 min-h-[44px] bg-base-100 border border-base-300 rounded-box cursor-text focus-within:border-primary focus-within:ring-3 focus-within:ring-primary/15">
  <span class="inline-flex items-center gap-1 px-2 py-1 text-[0.8125rem] bg-primary/10 text-primary rounded-full">
    React <button class="opacity-70 hover:opacity-100">&times;</button>
  </span>
  <input class="flex-1 min-w-[80px] h-7 px-1 text-[0.9375rem] bg-transparent border-none outline-none" placeholder="Add..." />
</div>

Requires: tw.min.css

// Add tag on Enter, remove on Backspace when input empty
// input.addEventListener('keydown', (e) => {
//   if (e.key === 'Enter' && input.value) { addTag(input.value); }
//   if (e.key === 'Backspace' && !input.value) { removeLastTag(); }
// });

Class	Description
`.autocomplete`	Container (relative positioned)
`.autocomplete-input`	Search input field
`.autocomplete-input-loading`	Loading state (spinner)
`.autocomplete-clear`	Clear button (shows on focus)
`.autocomplete-dropdown`	Results dropdown
`.autocomplete-dropdown-open`	Visible dropdown
`.autocomplete-dropdown-above`	Opens upward
`.autocomplete-list`	Results list
`.autocomplete-item`	Result item (44px)
`.autocomplete-item-active`	Keyboard-highlighted item
`.autocomplete-item-selected`	Previously selected item
`.autocomplete-item-disabled`	Disabled item
`.autocomplete-highlight`	Search match highlight
`.autocomplete-group-label`	Group header
`.autocomplete-empty`	No results state
`.autocomplete-loading`	Loading spinner
`.autocomplete-footer`	Footer with keyboard hints
`.autocomplete-tags`	Multi-select tag container
`.autocomplete-tag`	Selected tag pill
`.autocomplete-sm`	Small size (36px)
`.autocomplete-lg`	Large size (52px)
`.autocomplete.glass`	Glass morphism variant