LayoutUI
Theme Presets
Browse Components

Autocomplete

Suggest matching values as you type.

Basic

Type to filter suggestions or enter a custom value.

Choose a suggestion or enter another city.

View Code
HTML
<div class="field">
  <label for="destination">
    Destination
  </label>
  <input
    class="input"
    id="destination"
    name="destination"
    data-autocomplete
    list="destinations"
    placeholder="Search cities"
    aria-describedby="destination-help"
  >
  <datalist id="destinations">
    <option value="Amsterdam">
    </option>
    <option value="Barcelona">
    </option>
    <option value="Berlin">
    </option>
    <option value="Copenhagen">
    </option>
    <option value="Lisbon">
    </option>
    <option value="London">
    </option>
    <option value="Madrid">
    </option>
    <option value="Paris">
    </option>
    <option value="Rome">
    </option>
    <option value="Stockholm">
    </option>
  </datalist>
  <p class="field-help" id="destination-help">
    Choose a suggestion or enter another city.
  </p>
</div>

Disabled

Native disabled fields remain unavailable.

Choose a suggestion or enter another city.

View Code
HTML
<div class="field">
  <label for="destination">
    Destination
  </label>
  <input
    class="input"
    id="destination"
    name="destination"
    data-autocomplete
    disabled
    list="destinations"
    placeholder="Search cities"
    aria-describedby="destination-help"
  >
  <datalist id="destinations">
    <option value="Amsterdam">
    </option>
    <option value="Barcelona">
    </option>
    <option value="Berlin">
    </option>
    <option value="Copenhagen">
    </option>
    <option value="Lisbon">
    </option>
    <option value="London">
    </option>
    <option value="Madrid">
    </option>
    <option value="Paris">
    </option>
    <option value="Rome">
    </option>
    <option value="Stockholm">
    </option>
  </datalist>
  <p class="field-help" id="destination-help">
    Choose a suggestion or enter another city.
  </p>
</div>

Right-to-left

Suggestions follow the input direction.

اختر اقتراحًا أو أدخل مدينة أخرى.

View Code
HTML
<div dir="rtl" lang="ar">
  <div class="field">
    <label for="destination">
      الوجهة
    </label>
    <input
      class="input"
      id="destination"
      name="destination"
      data-autocomplete
      list="destinations"
      placeholder="ابحث عن مدينة"
      aria-describedby="destination-help"
    >
    <datalist id="destinations">
      <option value="أمستردام">
      </option>
      <option value="برشلونة">
      </option>
      <option value="برلين">
      </option>
      <option value="كوبنهاغن">
      </option>
      <option value="لشبونة">
      </option>
      <option value="لندن">
      </option>
      <option value="مدريد">
      </option>
      <option value="باريس">
      </option>
      <option value="روما">
      </option>
      <option value="ستوكهولم">
      </option>
    </datalist>
    <p class="field-help" id="destination-help">
      اختر اقتراحًا أو أدخل مدينة أخرى.
    </p>
  </div>
</div>

Installation

Download these files into the matching paths in your project, or use Create to assemble a kit. Include each dependency once. Do not also load app.css.

base.cssfield.cssselect.cssautocomplete.cssselect.jsautocomplete.js
Add to your page
<link rel="stylesheet" href="/library/assets/base.css">
<link rel="stylesheet" href="/library/assets/field.css">
<link rel="stylesheet" href="/library/assets/select.css">
<link rel="stylesheet" href="/library/assets/autocomplete.css">
<script defer src="/library/assets/select.js"></script>
<script defer src="/library/assets/autocomplete.js"></script>

16,654 bytes CSS including base · 16,552 bytes runtime JavaScript

Usage

Dynamic options and lifecycle

Applications own requests, loading and error feedback. Update the datalist options when results arrive. Call layoutAutocomplete.refresh(root) after mounting and destroy(input) before removal. Native datalist remains the fallback without JavaScript.

Suggestions and custom values

Type to filter options. Arrow keys highlight a suggestion; Enter selects it, Escape closes, and Tab keeps the typed value. Custom values are allowed. Use Select when users must choose an existing option.

Building with AI? The AI Manifest has these notes and the full contract. See the AI Guide.