Pre-fetched suggestions

All suggestions are loaded once on first interaction (simulated 600 ms network delay). Subsequent filtering runs entirely in-memory — no further network calls are made.

Select cities

The first keystroke triggers a one-time fetch. After that, filtering is instant.

View code

<label for="tags">Select cities</label>
<input id="tags" type="text" name="cities" />

<script type="module">
  import { Taga11y } from '../dist/taga11y.mjs';

  const CITIES = [
    'Amsterdam', 'Athens', 'Bangkok', 'Barcelona', 'Berlin',
    'Buenos Aires', 'Cairo', 'Cape Town', 'Copenhagen', 'Dubai',
    'Dublin', 'Helsinki', 'Hong Kong', 'Istanbul', 'Jakarta',
    'Johannesburg', 'Kyoto', 'Lagos', 'Lima', 'Lisbon',
    'London', 'Los Angeles', 'Madrid', 'Melbourne', 'Mexico City',
    'Milan', 'Mumbai', 'Nairobi', 'New York', 'Oslo',
    'Paris', 'Prague', 'Rome', 'San Francisco', 'São Paulo',
    'Seoul', 'Shanghai', 'Singapore', 'Stockholm', 'Sydney',
    'Tokyo', 'Toronto', 'Vienna', 'Warsaw', 'Zurich',
  ];

  new Taga11y(document.getElementById('tags'), {
    suggestions: {
      once: () => new Promise((resolve) => setTimeout(() => resolve(CITIES), 600)),
    },
  });
</script>