Autocomplete

What this example shows

SvAutoComplete - a production search field: free text with a live-filtered suggestion list (accepts ANY value; suggestions are shortcuts). Copy-paste ready.

Imports, features and API used

Imports: @svgrid/grid

Source code (315-autocomplete.svelte)

<script lang="ts">
  /**
   * SvAutoComplete - a production search field: free text with a live-filtered
   * suggestion list (accepts ANY value; suggestions are shortcuts). Copy-paste
   * ready.
   */
  import { SvAutoComplete } from '@svgrid/grid'

  const cities = [
    'Amsterdam', 'Austin', 'Bangalore', 'Barcelona', 'Berlin', 'Boston', 'Chicago',
    'Copenhagen', 'Dublin', 'Lisbon', 'London', 'Madrid', 'Melbourne', 'Munich',
    'New York', 'Paris', 'San Francisco', 'Seattle', 'Singapore', 'Stockholm', 'Sydney', 'Tokyo', 'Toronto',
  ]
  let city = $state('')
  let query = $state('')
</script>

<div class="wrap">
  <header>
    <h2>Autocomplete</h2>
    <p>A free-text field with suggestion shortcuts (unlike a combo box, any value is accepted). Search, tags, addresses.</p>
  </header>

  <div class="search">
    <SvAutoComplete
      value={city}
      suggestions={cities}
      placeholder="Search a city..."
      label="Office location"
      hint="Start typing - suggestions are just shortcuts"
      onChange={(v) => (city = v)}
    />
    <p class="out">{city ? `Selected: ${city}` : 'Nothing entered yet'}</p>
  </div>

  <div class="search">
    <SvAutoComplete
      value={query}
      suggestions={['status:open', 'assignee:me', 'label:bug', 'priority:high', 'is:archived']}
      minChars={1}
      placeholder="Filter issues..."
      label="Search syntax"
      onChange={(v) => (query = v)}
    />
  </div>
</div>

<style>
  .wrap { padding: 20px; max-width: 420px; display: flex; flex-direction: column; gap: 22px; }
  header h2 { margin: 0 0 4px; font-size: 20px; font-weight: 700; }
  header p { margin: 0; color: var(--sg-muted, #64748b); font-size: 13.5px; line-height: 1.5; }
  .search { display: flex; flex-direction: column; gap: 8px; }
  .out { margin: 0; font-size: 13px; color: var(--sg-muted, #64748b); }
</style>

View this example on GitHub

Related documentation

• SvAutoComplete

Related articles

• A Fill Handle (Drag to Fill) in SvGrid - Build a working spreadsheet-style fill handle on top of SvGrid's cell selection and editing - pointer tracking, range highlighting, series fill, and undo/redo integration all covered.
• Copy a Cell Range to the Clipboard in SvGrid - How SvGrid copies selected cell ranges as tab-separated values that paste cleanly into Excel and Google Sheets, plus headers, programmatic copy, and format control.
• An Autocomplete Cell Editor in SvGrid - Build a typeahead cell editor from scratch - filtering suggestions as the user types, committing cleanly on selection, and handling remote data without leaking requests.

More Selection examples

• Selection controls - List and overlay pickers: SvListBox (inline multi-select), SvDropDownList, SvComboBox (type to filter), SvAutoComplete (free text + suggestions), SvTagsInput (chips) and SvCountryInput (searchable, flags). Every popover portals out of the scroll container. Grid cell editors, standalone too.
• List box - SvListBox: an assignee picker - inline multi-select with grouped options (departments), roving keyboard + type-ahead and a live summary.
• Combo box - SvComboBox: a form field - type to filter a grouped, portalled list; the value must come from the list. With label + required validation.
• Drop-down list - SvDropDownList: a status / priority toolbar with grouped options, type-ahead and animated portalled panels driving a live issue list.
• Resizable dropdowns - Built-in browser bounds detection - every picker panel (SvDropDownList / SvComboBox / SvAutoComplete) opens downward when there is room and flips upward automatically near the window edge. Plus a `resizable` prop that adds a bottom drag grip to the open panel (drag to grow/shrink; height sticks for the session; grip hides on an upward flip). A switch compares fixed-height vs resizable. Theme-aware (light/dark).