Search Autocomplete

A search field over a real datalist: suggestions unroll under it, grouped, with the letters you typed underlined. "/" jumps in, arrows and Enter drive.

View the code Ask your AI

Forms No dependencies searchautocompletecomboboxform Added Jan 2026

/anim/search-input/ Fullscreen

With your AI

Just ask.

Say it to your AI. It gets the exact code below, not its best guess, and knows where it goes.

Add Kodza Search Autocomplete to my docs header.

Not plugged in yet?

claude mcp add -t http kodza https://kodza.dev/api/mcp

Also in Codex, Cursor and VS Code.

kodza-search-input.html

<div class="kodza-search">
  <label class="kodza-search__box">
    <svg class="kodza-search__icon" viewBox="0 0 16 16" aria-hidden="true"><circle cx="7" cy="7" r="4.5"/><path d="m10.5 10.5 3 3"/></svg>
    <input class="kodza-search__input" type="search" name="q" placeholder="Search components" list="kodza-search-list" autocomplete="off" aria-label="Search components">
    <kbd class="kodza-search__key">/</kbd>
  </label>
  <datalist class="kodza-search__options" id="kodza-search-list">
    <option value="Fill Button" label="Buttons"></option>
    <option value="Arrow Button" label="Buttons"></option>
    <option value="Scramble Link" label="Links"></option>
    <option value="Text Shimmer" label="Text"></option>
    <option value="Typewriter" label="Text"></option>
    <option value="Image Gallery" label="Images"></option>
    <option value="Pricing Plans" label="Cards"></option>
    <option value="Sticky Cards" label="Cards"></option>
    <option value="Command Palette" label="Navigation"></option>
    <option value="Scroll Header" label="Navigation"></option>
    <option value="Date Picker" label="Forms"></option>
    <option value="Multi Select" label="Forms"></option>
  </datalist>
</div>

kodza-search-input.css

/* Kodza License: free to use, client work included. Not to resell or redistribute, ported or not: https://kodza.dev/docs/#print-license */
/* Kodza — Search Autocomplete
   A search field over a real datalist (so the browser's own suggestions work without JS).
   With the script: suggestions unroll under the field, grouped, the letters you typed are
   underlined, a highlight slides between them and the list eases to its new height as you
   type. "/" jumps into the field from anywhere. Plug your own source with
   root.kodzaSearch = async (query) => [{ label, meta }].
   Everything is tuned with the --kz-search-* variables. */
.kodza-search {
  --kz-search-bg: #ffffff;
  --kz-search-fg: #0a0a0a;
  --kz-search-muted: rgba(10, 10, 10, 0.6);
  --kz-search-line: rgba(10, 10, 10, 0.14);
  --kz-search-line-hover: rgba(10, 10, 10, 0.3);
  --kz-search-soft: rgba(10, 10, 10, 0.06);
  --kz-search-shadow: 0 18px 40px -16px rgba(10, 10, 10, 0.3);
  --kz-search-height: 48px;
  --kz-search-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --kz-search-mono: ui-monospace, "SF Mono", Menlo, monospace;

  position: relative;
  width: 100%;
  max-width: 440px;
  /* The closed panel keeps its size, ready to unroll, but never lengthens the page */
  contain: layout;
  /* A number, not auto, so it can wait for the panel to roll up before dropping back */
  z-index: 0;
  transition: z-index 0s linear 0.35s;
  color: var(--kz-search-fg);
}

/* Open, the field rises above what follows it (its panel included) */
.kodza-search.is-open {
  z-index: 20;
  transition-delay: 0s;
}

.kodza-search__box {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--kz-search-height);
  padding: 0 10px 0 16px;
  border-radius: 999px;
  background: var(--kz-search-bg);
  box-shadow: inset 0 0 0 1px var(--kz-search-line);
  cursor: text;
  transition: box-shadow 0.25s ease;
}

.kodza-search__box:hover {
  box-shadow: inset 0 0 0 1px var(--kz-search-line-hover);
}

.kodza-search__box:focus-within {
  box-shadow: inset 0 0 0 1.5px var(--kz-search-fg), 0 0 0 4px var(--kz-search-soft);
}

.kodza-search__icon {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--kz-search-muted);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.kodza-search__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 15px;
  outline: none;
  appearance: none;
}

.kodza-search__input::placeholder {
  color: var(--kz-search-muted);
}

.kodza-search__input::-webkit-search-cancel-button {
  display: none;
}

/* The "/" hint gives way to a clear button once there is something to clear */
.kodza-search__key,
.kodza-search__clear {
  flex: none;
  display: grid;
  place-items: center;
  height: 26px;
  border-radius: 7px;
  transition: opacity 0.2s ease, transform 0.3s var(--kz-search-ease);
}

.kodza-search__key {
  min-width: 26px;
  padding: 0 6px;
  background: var(--kz-search-soft);
  color: var(--kz-search-muted);
  font-family: var(--kz-search-mono);
  font-size: 12px;
}

.kodza-search__clear {
  position: absolute;
  right: 10px;
  width: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--kz-search-soft);
  color: var(--kz-search-muted);
  cursor: pointer;
  opacity: 0;
  transform: scale(0.6);
  visibility: hidden;
}

.kodza-search__clear svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.kodza-search.has-value .kodza-search__key {
  opacity: 0;
  transform: scale(0.6);
}

.kodza-search.has-value .kodza-search__clear {
  opacity: 1;
  transform: none;
  visibility: visible;
}

.kodza-search__clear:focus-visible {
  outline: 2px solid var(--kz-search-fg);
  outline-offset: 1px;
}

/* The suggestions unroll under the field */
.kodza-search__panel {
  position: absolute;
  top: calc(var(--kz-search-height) + 8px);
  right: 0;
  left: 0;
  z-index: 20;
  overflow: hidden;
  border-radius: 16px;
  background: var(--kz-search-bg);
  box-shadow: 0 0 0 1px var(--kz-search-line), var(--kz-search-shadow);
  visibility: hidden;
  opacity: 0;
  clip-path: inset(0 0 100% 0 round 16px);
  transform: translateY(-4px);
  transition:
    clip-path 0.35s var(--kz-search-ease),
    opacity 0.2s ease,
    transform 0.35s var(--kz-search-ease),
    visibility 0s linear 0.35s;
}

.kodza-search.is-open .kodza-search__panel {
  visibility: visible;
  opacity: 1;
  clip-path: inset(-40px -40px -60px -40px round 16px);
  transform: none;
  transition-delay: 0s;
}

/* Not enough room below: they unroll upwards, and grow upwards as you type */
.kodza-search.is-above .kodza-search__panel {
  top: auto;
  bottom: calc(var(--kz-search-height) + 8px);
  clip-path: inset(100% 0 0 0 round 16px);
  transform: translateY(4px);
}

.kodza-search.is-above.is-open .kodza-search__panel {
  clip-path: inset(-60px -40px -40px -40px round 16px);
  transform: none;
}

.kodza-search__list {
  position: relative;
  max-height: 320px;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
}

.kodza-search__group {
  padding: 10px 12px 6px;
  font-family: var(--kz-search-mono);
  font-size: 11px;
  color: var(--kz-search-muted);
}

.kodza-search__highlight {
  position: absolute;
  top: 0;
  right: 6px;
  left: 6px;
  height: var(--kz-hl-h, 40px);
  border-radius: 10px;
  background: var(--kz-search-soft);
  opacity: var(--kz-hl-on, 0);
  transform: translateY(var(--kz-hl-y, 0));
  pointer-events: none;
}

.kodza-search.is-open .kodza-search__highlight {
  transition: transform 0.2s var(--kz-search-ease), opacity 0.15s ease;
}

.kodza-search__option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.kodza-search__option mark {
  background: none;
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

.kodza-search__meta {
  font-family: var(--kz-search-mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--kz-search-muted);
}

.kodza-search__empty {
  padding: 28px 16px 30px;
  font-size: 14px;
  color: var(--kz-search-muted);
  text-align: center;
}

.kodza-search__live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .kodza-search__box,
  .kodza-search__key,
  .kodza-search__clear,
  .kodza-search__panel,
  .kodza-search.is-open .kodza-search__highlight {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

/* Theming example — on a dark background:
.dark-section .kodza-search {
  --kz-search-bg: #161616;
  --kz-search-fg: #f2f2f0;
  --kz-search-muted: rgba(242, 242, 240, 0.62);
  --kz-search-line: rgba(255, 255, 255, 0.14);
  --kz-search-line-hover: rgba(255, 255, 255, 0.3);
  --kz-search-soft: rgba(255, 255, 255, 0.08);
  --kz-search-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.8);
}
*/

/* kodza-guard 8da2578c017b — generated by Kodza, do not edit.
   Theme guard: keeps a site's own CSS (WordPress themes, Bootstrap, CSS resets…) off this
   component. :not(#_) is always true and weighs as much as an id, so these lines win over
   theme rules made of classes and tags. Customise the component through its --kz-* variables. */

/* What the browser gives, where the component sets it only in some states: at the lowest weight, so its own rules below put it back */

:where(.kodza-search__clear):not(#_) {
  outline: revert;
  outline-offset: revert;
}

/* What the browser gives, on everything the component leaves to it */

.kodza-search:not(#_),
.kodza-search__options:not(#_),
.kodza-search__panel:not(#_),
.kodza-search__live:not(#_) {
  box-sizing: revert;
}

.kodza-search__box:not(#_) {
  border: revert;
  margin: revert;
  outline: revert;
  text-decoration: revert;
  list-style: revert;
  box-sizing: revert;
  float: revert;
  outline-offset: revert;
  appearance: revert;
  max-width: revert;
  max-height: revert;
  color: revert;
  font-family: revert;
  font-size: revert;
  font-weight: revert;
  font-style: revert;
  line-height: revert;
  letter-spacing: revert;
  text-transform: revert;
  text-underline-offset: revert;
  text-align: revert;
  text-indent: revert;
  text-shadow: revert;
  vertical-align: revert;
}

.kodza-search__icon:not(#_),
.kodza-search__clear svg:where(:not([class*="kodza-"])):not(#_) {
  border: revert;
  margin: revert;
  padding: revert;
  border-radius: revert;
  outline: revert;
  text-decoration: revert;
  transition: revert;
  list-style: revert;
  box-sizing: revert;
  float: revert;
  position: revert;
  background-color: revert;
  background-image: revert;
  box-shadow: revert;
  outline-offset: revert;
  appearance: revert;
  max-width: revert;
  max-height: revert;
  color: revert;
  font-family: revert;
  font-size: revert;
  font-weight: revert;
  font-style: revert;
  line-height: revert;
  letter-spacing: revert;
  text-transform: revert;
  text-underline-offset: revert;
  text-align: revert;
  text-indent: revert;
  text-shadow: revert;
  vertical-align: revert;
}

.kodza-search__input:not(#_) {
  margin: revert;
  border-radius: revert;
  text-decoration: revert;
  transition: revert;
  list-style: revert;
  box-sizing: revert;
  float: revert;
  position: revert;
  box-shadow: revert;
  outline-offset: revert;
  max-width: revert;
  max-height: revert;
  letter-spacing: revert;
  text-transform: revert;
  text-underline-offset: revert;
  text-align: revert;
  text-indent: revert;
  text-shadow: revert;
  vertical-align: revert;
  white-space: revert;
  min-height: revert;
}

.kodza-search__key:not(#_) {
  border: revert;
  margin: revert;
  outline: revert;
  text-decoration: revert;
  list-style: revert;
  box-sizing: revert;
  float: revert;
  position: revert;
  box-shadow: revert;
  outline-offset: revert;
  appearance: revert;
  max-width: revert;
  max-height: revert;
  font-weight: revert;
  font-style: revert;
  line-height: revert;
  letter-spacing: revert;
  text-transform: revert;
  text-underline-offset: revert;
  text-align: revert;
  text-indent: revert;
  text-shadow: revert;
  vertical-align: revert;
}

.kodza-search__clear:not(#_) {
  margin: revert;
  text-decoration: revert;
  list-style: revert;
  box-sizing: revert;
  float: revert;
  box-shadow: revert;
  appearance: revert;
  max-width: revert;
  max-height: revert;
  font-family: revert;
  font-size: revert;
  font-weight: revert;
  font-style: revert;
  line-height: revert;
  letter-spacing: revert;
  text-transform: revert;
  text-underline-offset: revert;
  text-align: revert;
  text-indent: revert;
  text-shadow: revert;
  vertical-align: revert;
  white-space: revert;
  min-height: revert;
}

.kodza-search__list:not(#_) {
  border: revert;
  border-radius: revert;
  outline: revert;
  text-decoration: revert;
  transition: revert;
  box-sizing: revert;
  float: revert;
  background-color: revert;
  background-image: revert;
  box-shadow: revert;
  outline-offset: revert;
  appearance: revert;
  max-width: revert;
  color: revert;
  font-family: revert;
  font-size: revert;
  font-weight: revert;
  font-style: revert;
  line-height: revert;
  letter-spacing: revert;
  text-transform: revert;
  text-underline-offset: revert;
  text-align: revert;
  text-indent: revert;
  text-shadow: revert;
  vertical-align: revert;
}

.kodza-search__options option:where(:not([class*="kodza-"])):not(#_) {
  box-sizing: revert;
  color: revert;
}

.kodza-search__icon:not(#_):where(:not([hidden])),
.kodza-search__input:not(#_):where(:not([hidden])),
.kodza-search__list:not(#_):where(:not([hidden])),
.kodza-search__clear svg:where(:not([class*="kodza-"])):not(#_):where(:not([hidden])) {
  display: revert;
}

.kodza-search__icon:not(#_):where([hidden]),
.kodza-search__input:not(#_):where([hidden]),
.kodza-search__list:not(#_):where([hidden]),
.kodza-search__clear svg:where(:not([class*="kodza-"])):not(#_):where([hidden]) {
  display: none;
}

/* The component's own rules, one step stronger: real buttons and fields, what it sets on tags themes style (links, lists, headings, images…), and the root width (a theme may narrow it, never widen it) */

.kodza-search:not(#_) {
  width: min(100%, 440px);
}

.kodza-search__box:not(#_) {
  position: relative;
  display: flex;
  padding: 0 10px 0 16px;
  border-radius: 999px;
  background: var(--kz-search-bg);
  box-shadow: inset 0 0 0 1px var(--kz-search-line);
  transition: box-shadow 0.25s ease;
}

.kodza-search__box:hover:not(#_) {
  box-shadow: inset 0 0 0 1px var(--kz-search-line-hover);
}

.kodza-search__box:focus-within:not(#_) {
  box-shadow: inset 0 0 0 1.5px var(--kz-search-fg), 0 0 0 4px var(--kz-search-soft);
}

.kodza-search__input:not(#_) {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 15px;
  outline: none;
  appearance: none;
}

.kodza-search__input:not(#_)::placeholder {
  color: var(--kz-search-muted);
}

.kodza-search__input:not(#_)::-webkit-search-cancel-button {
  display: none;
}

.kodza-search__key:not(#_) {
  display: grid;
  border-radius: 7px;
  transition: opacity 0.2s ease, transform 0.3s var(--kz-search-ease);
}

.kodza-search__clear:not(#_) {
  flex: none;
  display: grid;
  place-items: center;
  height: 26px;
  border-radius: 7px;
  transition: opacity 0.2s ease, transform 0.3s var(--kz-search-ease);
}

.kodza-search__key:not(#_) {
  padding: 0 6px;
  background: var(--kz-search-soft);
  color: var(--kz-search-muted);
  font-family: var(--kz-search-mono);
  font-size: 12px;
}

.kodza-search__clear:not(#_) {
  position: absolute;
  right: 10px;
  width: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--kz-search-soft);
  color: var(--kz-search-muted);
  cursor: pointer;
  opacity: 0;
  transform: scale(0.6);
  visibility: hidden;
}

.kodza-search.has-value .kodza-search__clear:not(#_) {
  opacity: 1;
  transform: none;
  visibility: visible;
}

.kodza-search__clear:focus-visible:not(#_) {
  outline: 2px solid var(--kz-search-fg);
  outline-offset: 1px;
}

.kodza-search__list:not(#_) {
  position: relative;
  max-height: 320px;
  margin: 0;
  padding: 6px;
  list-style: none;
}

@media (prefers-reduced-motion: reduce) {
  .kodza-search__box:not(#_),
  .kodza-search__key:not(#_) {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kodza-search__clear:not(#_) {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

kodza-search-input.js

// Kodza License: free to use, client work included. Not to resell or redistribute, ported or not: https://kodza.dev/docs/#print-license
// Kodza — Search Autocomplete
// Turns the field into an ARIA combobox: reads the suggestions from its own <datalist> (or from
// root.kodzaSearch(query), an async function returning [{ label, meta }]), filters them by
// letters in order, underlines the matches, groups them by meta, and lets the arrows, Enter and
// Escape drive. "/" focuses the first search of the page. Fires "kodza:search" with { value }.
(() => {
  const SELECTOR = '.kodza-search';
  const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  const cross = '<svg viewBox="0 0 12 12" aria-hidden="true"><path d="M3 3l6 6M9 3 3 9"/></svg>';
  let uid = 0;
  let slashTaken = false;

  // Positions of the query's letters in the text, in order, or null
  const match = (text, query) => {
    const hits = [];
    let from = 0;
    for (const char of query) {
      const at = text.indexOf(char, from);
      if (at < 0) return null;
      hits.push(at);
      from = at + 1;
    }
    return hits;
  };

  // One instance. Everything it starts is tied to `signal`, so kodza:destroy stops it all
  function mount(root, signal) {
    const input = root.querySelector('.kodza-search__input');
    const box = root.querySelector('.kodza-search__box');
    const datalist = root.querySelector('.kodza-search__options');
    if (!input || !box) return;
    const id = `kodza-search-${++uid}`;
    const local = datalist ? [...datalist.options].map((option) => ({ label: option.value, meta: option.label || '' })) : [];
    // The custom list replaces the browser's own
    input.removeAttribute('list');

    const clear = document.createElement('button');
    clear.type = 'button';
    clear.className = 'kodza-search__clear';
    clear.tabIndex = -1;
    clear.setAttribute('aria-label', 'Clear the search');
    clear.innerHTML = cross;
    box.append(clear);

    const panel = document.createElement('div');
    panel.className = 'kodza-search__panel';
    const list = document.createElement('ul');
    list.className = 'kodza-search__list';
    list.id = `${id}-list`;
    list.setAttribute('role', 'listbox');
    list.setAttribute('aria-label', 'Suggestions');
    // A list that scrolls is reachable with Tab in Chrome: here the arrows drive it, from the field
    list.tabIndex = -1;
    panel.append(list);
    const live = Object.assign(document.createElement('span'), { className: 'kodza-search__live' });
    live.setAttribute('aria-live', 'polite');
    root.append(panel, live);

    input.setAttribute('role', 'combobox');
    input.setAttribute('aria-expanded', 'false');
    input.setAttribute('aria-controls', list.id);
    input.setAttribute('aria-autocomplete', 'list');

    let items = [];
    let active = null;
    let resize = null;
    let token = 0;

    const light = (entry, scroll = true) => {
      active = entry;
      items.forEach((it) => it.el.setAttribute('aria-selected', String(it === entry)));
      if (!entry) {
        input.removeAttribute('aria-activedescendant');
        return list.style.setProperty('--kz-hl-on', 0);
      }
      input.setAttribute('aria-activedescendant', entry.el.id);
      list.style.setProperty('--kz-hl-y', `${entry.el.offsetTop}px`);
      list.style.setProperty('--kz-hl-h', `${entry.el.offsetHeight}px`);
      list.style.setProperty('--kz-hl-on', 1);
      // Scroll the list only (scrollIntoView would also nudge the page), with the row's group
      // heading when it opens the group, and the list's own padding above the very first row
      if (scroll) {
        const prev = entry.el.previousElementSibling;
        const first = prev?.classList.contains('kodza-search__group') ? prev : entry.el;
        const top = first.previousElementSibling?.classList.contains('kodza-search__highlight') ? 0 : first.offsetTop;
        const bottom = entry.el.offsetTop + entry.el.offsetHeight;
        if (top < list.scrollTop) list.scrollTop = top;
        else if (bottom > list.scrollTop + list.clientHeight) list.scrollTop = bottom - list.clientHeight;
      }
    };

    // Draw the results, grouped by meta; the panel eases to its new height
    const draw = (results, query) => {
      const from = panel.offsetHeight;
      const highlight = Object.assign(document.createElement('li'), { className: 'kodza-search__highlight' });
      highlight.setAttribute('role', 'presentation');
      list.replaceChildren(highlight);
      items = [];
      const groups = new Map();
      results.forEach((result) => {
        const key = result.meta || '';
        if (!groups.has(key)) groups.set(key, []);
        groups.get(key).push(result);
      });
      groups.forEach((group, meta) => {
        if (meta && groups.size > 1) {
          const head = Object.assign(document.createElement('li'), { className: 'kodza-search__group', textContent: meta });
          head.setAttribute('role', 'presentation');
          list.append(head);
        }
        group.forEach((result) => {
          const el = document.createElement('li');
          el.className = 'kodza-search__option';
          el.id = `${id}-option-${items.length}`;
          el.setAttribute('role', 'option');
          const label = document.createElement('span');
          const hits = query ? match(result.label.toLowerCase(), query) || [] : [];
          let last = 0;
          hits.forEach((at) => {
            label.append(result.label.slice(last, at), Object.assign(document.createElement('mark'), { textContent: result.label[at] }));
            last = at + 1;
          });
          label.append(result.label.slice(last));
          // The meta is said once by the group heading; alone, each row says it
          el.append(label, Object.assign(document.createElement('span'), { className: 'kodza-search__meta', textContent: groups.size > 1 ? '' : result.meta || '' }));
          const entry = { el, result };
          el.addEventListener('pointermove', () => active !== entry && light(entry, false), { signal });
          el.addEventListener('click', () => choose(entry), { signal });
          list.append(el);
          items.push(entry);
        });
      });
      if (!results.length) {
        const empty = Object.assign(document.createElement('li'), { className: 'kodza-search__empty', textContent: 'Nothing found. Not even a bug.' });
        empty.setAttribute('role', 'presentation');
        list.append(empty);
      }
      live.textContent = results.length ? `${results.length} suggestion${results.length > 1 ? 's' : ''}` : 'No suggestions';
      light(query ? items[0] || null : null, false);
      if (!reduceMotion && root.classList.contains('is-open')) {
        resize?.cancel();
        const to = panel.offsetHeight;
        if (Math.abs(to - from) > 1) resize = panel.animate([{ height: `${from}px` }, { height: `${to}px` }], { duration: 260, easing: 'cubic-bezier(0.22, 1, 0.36, 1)' });
      }
    };

    const search = async () => {
      const query = input.value.trim().toLowerCase();
      root.classList.toggle('has-value', input.value !== '');
      const mine = ++token;
      let results;
      if (typeof root.kodzaSearch === 'function') {
        try {
          results = await root.kodzaSearch(query);
        } catch {
          results = [];
        }
        if (mine !== token) return;
      } else {
        results = query ? local.filter((item) => match(item.label.toLowerCase(), query)) : local.slice(0, 5);
      }
      draw(results, query);
    };

    const open = () => {
      if (root.classList.contains('is-open')) return;
      search();
      // Not enough room below and more above: the suggestions open upwards. A closed panel that
      // changes side gets there at once, so it always unrolls from the field
      const field = box.getBoundingClientRect();
      const above = field.bottom + Math.min(332, panel.scrollHeight) + 16 > innerHeight && field.top > innerHeight / 2;
      if (above !== root.classList.contains('is-above')) {
        panel.style.transition = 'none';
        root.classList.toggle('is-above', above);
        void panel.offsetWidth;
        panel.style.transition = '';
      }
      root.classList.add('is-open');
      input.setAttribute('aria-expanded', 'true');
    };
    const close = () => {
      root.classList.remove('is-open');
      input.setAttribute('aria-expanded', 'false');
      light(null);
    };
    const choose = (entry) => {
      if (!entry) return;
      input.value = entry.result.label;
      root.classList.add('has-value');
      close();
      root.dispatchEvent(new CustomEvent('kodza:search', { detail: { value: entry.result.label, item: entry.result }, bubbles: true }));
    };

    input.addEventListener('focus', open, { signal });
    input.addEventListener('input', () => {
      if (!root.classList.contains('is-open')) open();
      else search();
    }, { signal });
    input.addEventListener('keydown', (event) => {
      const index = items.indexOf(active);
      if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
        event.preventDefault();
        open();
        // From nothing highlighted, the first one down or the last one up
        const to = index < 0 ? (event.key === 'ArrowDown' ? 0 : -1) : index + (event.key === 'ArrowDown' ? 1 : -1);
        if (items.length) light(items[(to + items.length) % items.length]);
      } else if (event.key === 'Enter') {
        if (active && root.classList.contains('is-open')) {
          event.preventDefault();
          choose(active);
        }
      } else if (event.key === 'Escape') {
        if (root.classList.contains('is-open')) close();
        else {
          input.value = '';
          root.classList.remove('has-value');
        }
      } else if (event.key === 'Tab') {
        close();
      }
    }, { signal });
    clear.addEventListener('click', () => {
      input.value = '';
      root.classList.remove('has-value');
      input.focus();
      search();
    }, { signal });
    panel.addEventListener('mousedown', (event) => event.preventDefault(), { signal });
    document.addEventListener('pointerdown', (event) => !root.contains(event.target) && close(), { signal });

    if (!slashTaken) {
      slashTaken = true;
      document.addEventListener('keydown', (event) => {
        if (event.key !== '/' || event.target.closest?.('input, textarea, select, [contenteditable]')) return;
        event.preventDefault();
        input.focus();
      }, { signal });
      // Stopped, it hands "/" to the next search started
      signal.addEventListener('abort', () => (slashTaken = false));
    }

    root.classList.toggle('has-value', input.value !== '');
  }

  // Kodza lifecycle, the same in every component: `kodza:init` starts the instances inside
  // event.detail.root (the whole page by default), `kodza:destroy` stops them and puts their
  // markup back. For themes and apps that swap content without a page load.
  const instances = new WeakMap();
  const find = (scope = document) => [scope, ...scope.querySelectorAll(SELECTOR)].filter((el) => el.matches?.(SELECTOR));
  const init = (scope) => find(scope).forEach((root) => {
    if (root.classList.contains('is-ready')) return; // already running, maybe from another copy of this script
    const controller = new AbortController();
    instances.set(root, { controller, html: root.innerHTML, attrs: [...root.attributes].map((a) => [a.name, a.value]) });
    mount(root, controller.signal);
    root.classList.add('is-ready');
  });
  const destroy = (scope) => find(scope).forEach((root) => {
    const instance = instances.get(root);
    if (!instance) return;
    instances.delete(root);
    instance.controller.abort();
    [...root.attributes].forEach((a) => root.removeAttribute(a.name));
    instance.attrs.forEach(([name, value]) => root.setAttribute(name, value));
    root.innerHTML = instance.html;
  });
  document.addEventListener('kodza:init', (event) => init(event.detail?.root));
  document.addEventListener('kodza:destroy', (event) => destroy(event.detail?.root));
  init();
  // Loaded in <head>, the script runs before the markup exists: once more when it is parsed
  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', () => init(), { once: true });
})();

SearchAutocomplete.tsx

'use client';
// Kodza — Search Autocomplete, for React. From https://kodza.dev/components/search-input/
// Kodza License: free to use, client work included. Not to resell or redistribute, ported or not: https://kodza.dev/docs/#print-license
// Next to this file: search-input.css and search-input.js, the component's CSS and JS from Kodza, as they are.
// Yours to edit: the markup is plain JSX below.
// The script changes this markup once React has rendered it (it adds layers, splits text, moves
// nodes), so React must not patch it afterwards. When a prop changes, the key gives React a fresh
// element: kodza:destroy stops the script on the old one, kodza:init starts it on the new one.
import { useRef, useEffect, type ComponentPropsWithoutRef, type ComponentRef, type CSSProperties } from 'react';
import './search-input.css';

export type SearchAutocompleteProps = Omit<ComponentPropsWithoutRef<'div'>, "children" | "vars" | "onSearch"> & {
  /** Settings, as CSS variables on the root */
  vars?: {
    /** default: #ffffff */
    "--kz-search-bg"?: string | number;
    /** default: #0a0a0a */
    "--kz-search-fg"?: string | number;
    /** default: rgba(10, 10, 10, 0.6) */
    "--kz-search-muted"?: string | number;
    /** default: rgba(10, 10, 10, 0.14) */
    "--kz-search-line"?: string | number;
    /** default: rgba(10, 10, 10, 0.3) */
    "--kz-search-line-hover"?: string | number;
    /** default: rgba(10, 10, 10, 0.06) */
    "--kz-search-soft"?: string | number;
    /** default: 0 18px 40px -16px rgba(10, 10, 10, 0.3) */
    "--kz-search-shadow"?: string | number;
    /** default: 48px */
    "--kz-search-height"?: string | number;
    /** default: cubic-bezier(0.22, 1, 0.36, 1) */
    "--kz-search-ease"?: string | number;
    /** default: ui-monospace, "SF Mono", Menlo, monospace */
    "--kz-search-mono"?: string | number;
  };
  /** The text, plain: the script reads it and rebuilds the markup around it */
  children?: string;
  /** "kodza:search", fired by the script (bubbles from the root) */
  onSearch?: (event: CustomEvent) => void;
  className?: string;
};

export function SearchAutocomplete({ vars, children = "/", onSearch, className, style, ...rest }: SearchAutocompleteProps) {
  const ref = useRef<ComponentRef<'div'>>(null);
  const classes = ["kodza-search", className].filter(Boolean).join(' ');
  // Everything the markup is made of: when it changes, React gets a fresh element (see the top)
  const key = JSON.stringify([classes, vars, children, style, rest]);

  // Starts the script on this element once React has rendered it, stops it when it goes
  useEffect(() => {
    const root = ref.current;
    let live = true;
    // @ts-ignore: a plain script, no types to find
    import('./search-input.js').then(() => {
      if (live) document.dispatchEvent(new CustomEvent('kodza:init', { detail: { root } }));
    });
    return () => {
      live = false;
      document.dispatchEvent(new CustomEvent('kodza:destroy', { detail: { root } }));
    };
  }, [key]);

  useEffect(() => {
    const root = ref.current;
    if (!root || !onSearch) return;
    const listener = (event: Event) => onSearch(event as CustomEvent);
    root.addEventListener("kodza:search", listener);
    return () => root.removeEventListener("kodza:search", listener);
  }, [onSearch, key]);

  return (
    <div key={key} {...rest} className={classes} style={{ ...vars, ...style } as CSSProperties} ref={ref}>
      <label className="kodza-search__box">
        <svg className="kodza-search__icon" viewBox="0 0 16 16" aria-hidden="true">
          <circle cx="7" cy="7" r="4.5" />
          <path d="m10.5 10.5 3 3" />
        </svg>
        {' '}
        <input className="kodza-search__input" type="search" name="q" placeholder="Search components" list="kodza-search-list" autoComplete="off" aria-label="Search components" />
        {' '}
        <kbd className="kodza-search__key">{children}</kbd>
      </label>
      {' '}
      <datalist className="kodza-search__options" id="kodza-search-list">
        <option value="Fill Button" label="Buttons" />
        <option value="Arrow Button" label="Buttons" />
        <option value="Scramble Link" label="Links" />
        <option value="Text Shimmer" label="Text" />
        <option value="Typewriter" label="Text" />
        <option value="Image Gallery" label="Images" />
        <option value="Pricing Plans" label="Cards" />
        <option value="Sticky Cards" label="Cards" />
        <option value="Command Palette" label="Navigation" />
        <option value="Scroll Header" label="Navigation" />
        <option value="Date Picker" label="Forms" />
        <option value="Multi Select" label="Forms" />
      </datalist>
    </div>
  );
}

Checked

Checked before you paste.

Robots poked at it before you did. Every component goes through the same checks, and again each time it changes.

What ranLast run Oct 21, 2026

Accessibilityaxe-core 4.10.2: the WCAG 2.1 A and AA rules, plus best practices. 0 issues

KeyboardThe Tab key gets there, and the focus ring shows when it does. Passed

Reduced motionTurn on reduced motion and what moved just appears. Nothing loops. Passed

Light and darkThe same checks on both themes, contrast included. Passed

WordPressPasted into Twenty Twenty-Five, Twenty Twenty-One, Astra, Blocksy, GeneratePress, Hello Elementor, Kadence and OceanWP. Nothing to flag. 8 / 8 themes

Robots checked this. A human with VoiceOver hasn't yet.

KeyboardPress them in the preview

In the field, while suggestions are open