Basic GET Request
Simple autocomplete that fetches options using a GET request.
Default GET Request
Using endpoint="/api/search" makes a GET
request to
/api/search?query=WHAT_THE_USER_TYPED.
<dynamic-datalist
endpoint="/api/search">
<label for="search1">Search
<input
type="text"
id="search1"
name="search"
placeholder="Type to search..." />
</label>
</dynamic-datalist>POST Request
Send the search query using a POST request with JSON body.
POST Method
Using method="post" makes a POST request
with JSON body: { "query": "..." }.
<dynamic-datalist
endpoint="/api/lookup"
method="post">
<label for="search2">Lookup
<input
type="text"
id="search2"
name="lookup"
placeholder="Type to lookup..." />
</label>
</dynamic-datalist>Custom Variable Name
Change the variable name used for the query parameter.
Custom Key Attribute
Using key="term" sends the query as
/api/search?term=... (GET) or
{ "term": "..." } (POST).
<dynamic-datalist
endpoint="/api/terms"
method="post"
key="term">
<label for="search3">Term search
<input
type="text"
id="search3"
name="term"
placeholder="Type a term..." />
</label>
</dynamic-datalist>Using Existing Datalist
Enhance existing datalist elements with dynamic fetching.
Pre-populated Datalist
When the input already has a datalist, the component will preserve the existing options and add fetched results. This is useful for providing default options before the user starts typing.
<dynamic-datalist
endpoint="/api/cities">
<label for="search4">City
<input
type="text"
id="search4"
list="cities-list"
placeholder="Type a city..." />
</label>
<datalist id="cities-list">
<option>New York</option>
<option>Los Angeles</option>
<option>Chicago</option>
</datalist>
</dynamic-datalist>Real-World Examples
Common patterns and use cases for dynamic datalists.
Product Search
A typical e-commerce product search with autocomplete suggestions.
<form action="/search" method="get">
<dynamic-datalist
endpoint="/api/products">
<label for="product-search">
Search products
<input
type="search"
id="product-search"
name="q"
placeholder="Search for products..."
required />
</label>
</dynamic-datalist>
<button type="submit">Search</button>
</form>User Mention/Tag
Autocomplete for mentioning users or adding tags, often triggered by special characters.
<form action="/comment" method="post">
<dynamic-datalist
endpoint="/api/users"
key="username">
<label for="mention">
Mention a user
<input
type="text"
id="mention"
name="mention"
placeholder="Start typing @..." />
</label>
</dynamic-datalist>
<button type="submit">Post</button>
</form>Address Autocomplete
Address lookup with autocomplete, useful for shipping or location forms.
<form action="/checkout" method="post">
<label for="name">Name
<input
type="text"
id="name"
name="name"
required />
</label>
<dynamic-datalist
endpoint="/api/addresses">
<label for="address">Address
<input
type="text"
id="address"
name="address"
placeholder="Start typing your address..."
required />
</label>
</dynamic-datalist>
<button type="submit">Continue</button>
</form>Event Handling
The component emits custom events that you can listen to for advanced functionality.
Listening to Events
The component fires three custom events:
dynamic-datalist:ready,
dynamic-datalist:update, and
dynamic-datalist:error. This demo logs all
events to show you what's happening under the hood.
<dynamic-datalist
id="event-demo"
endpoint="/api/search">
<input type="text" />
</dynamic-datalist>
<script>
const el = document
.getElementById('event-demo');
el.addEventListener(
'dynamic-datalist:ready',
(e) => {
console.log('Ready:', e.detail);
});
el.addEventListener(
'dynamic-datalist:update',
(e) => {
console.log('Options:',
e.detail.options);
});
el.addEventListener(
'dynamic-datalist:error',
(e) => {
console.error('Error:',
e.detail.error);
});
</script>API Reference
For complete documentation of attributes, events, response format, and browser support, see the README.