Suggestions are fetched from a simulated async API on each keystroke (debounced 300 ms). A loading indicator appears while the request is in flight. Stale requests are aborted automatically.
Type any letters — rapid typing cancels previous requests. Try typing quickly then pausing.
<label for="tags">Search countries</label>
<input id="tags" type="text" name="countries" />
<script type="module">
import { Taga11y } from '../dist/taga11y.mjs';
const ALL_COUNTRIES = [
'Afghanistan', 'Albania', 'Algeria', 'Argentina', 'Australia',
'Austria', 'Bangladesh', 'Belgium', 'Brazil', 'Canada',
'Chile', 'China', 'Colombia', 'Croatia', 'Czech Republic',
'Denmark', 'Egypt', 'Finland', 'France', 'Germany',
'Greece', 'Hungary', 'India', 'Indonesia', 'Iran',
'Ireland', 'Israel', 'Italy', 'Japan', 'Jordan',
'Kenya', 'Malaysia', 'Mexico', 'Morocco', 'Netherlands',
'New Zealand', 'Nigeria', 'Norway', 'Pakistan', 'Peru',
'Philippines', 'Poland', 'Portugal', 'Romania', 'Russia',
'Saudi Arabia', 'South Africa', 'South Korea', 'Spain', 'Sweden',
'Switzerland', 'Thailand', 'Turkey', 'Ukraine', 'United Kingdom',
'United States', 'Vietnam',
];
function mockFetch(query, signal) {
return new Promise((resolve, reject) => {
const id = setTimeout(() => {
const lower = query.toLowerCase();
resolve(ALL_COUNTRIES.filter((c) => c.toLowerCase().includes(lower)));
}, 400);
signal.addEventListener('abort', () => {
clearTimeout(id);
reject(new DOMException('Aborted', 'AbortError'));
});
});
}
new Taga11y(document.getElementById('tags'), {
suggestions: { query: mockFetch },
debounceMs: 300,
});
</script>