Autocomplete

Type-ahead search that filters a list of options. Falls back to static DOM filtering when no JS source is provided — perfect for small inline datasets.

Static list

Pre-rendered items are filtered live as you type.

Framework

React

Vue

Svelte

Angular

Solid

Qwik

Preact

<p class="lp-text-sm lp-text-muted lp-mb-2">Pre-rendered items are filtered live as you type.</p>
<div class="lp-form-group lp-mb-0">
    <label class="lp-form-group-label">Framework</label>
    <div class="lp-autocomplete" data-lp-component="autocomplete">
        <input class="lp-autocomplete-input lp-input" placeholder="Type a framework…" />
        <div class="lp-autocomplete-results">
            <div class="lp-autocomplete-item" data-value="react">React</div>
            <div class="lp-autocomplete-item" data-value="vue">Vue</div>
            <div class="lp-autocomplete-item" data-value="svelte">Svelte</div>
            <div class="lp-autocomplete-item" data-value="angular">Angular</div>
            <div class="lp-autocomplete-item" data-value="solid">Solid</div>
            <div class="lp-autocomplete-item" data-value="qwik">Qwik</div>
            <div class="lp-autocomplete-item" data-value="preact">Preact</div>
        </div>
    </div>
</div>

JS array source

Pass an array programmatically via new Autocomplete(el, { source: [...] }).

City

<p class="lp-text-sm lp-text-muted lp-mb-2">Pass an array programmatically via <code>new Autocomplete(el, { source: [...] })</code>.</p>
<div class="lp-form-group lp-mb-0">
    <label class="lp-form-group-label">City</label>
    <div class="lp-autocomplete" id="ac-array">
        <input class="lp-autocomplete-input lp-input" placeholder="Search cities…" />
        <div class="lp-autocomplete-results"></div>
    </div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
    if (!window.Launchpad?.Autocomplete) return;
    const cities = ["New York","San Francisco","Los Angeles","Chicago","Seattle","Boston","Austin","Denver","Miami","Portland","London","Paris","Berlin","Tokyo","Sydney"];
    new window.Launchpad.Autocomplete(document.getElementById("ac-array"), { source: cities });
});
</script>

Async source (fake API)

Pass an async function as source. Useful for real API-backed lookups.

User

<p class="lp-text-sm lp-text-muted lp-mb-2">Pass an async function as <code>source</code>. Useful for real API-backed lookups.</p>
<div class="lp-form-group lp-mb-0">
    <label class="lp-form-group-label">User</label>
    <div class="lp-autocomplete" id="ac-async">
        <input class="lp-autocomplete-input lp-input" placeholder="Search users…" />
        <div class="lp-autocomplete-results"></div>
    </div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
    if (!window.Launchpad?.Autocomplete) return;
    const users = ["alice","bob","carol","david","eve","frank","grace","heidi","ivan","judy"];
    const fakeApi = (q) => new Promise((resolve) => {
        setTimeout(() => {
            resolve(users.filter(u => u.includes(q.toLowerCase())));
        }, 300);
    });
    new window.Launchpad.Autocomplete(document.getElementById("ac-async"), { source: fakeApi });
});
</script>

Options reference

Option	Default	Purpose
`minChars`	`1`	Minimum characters before searching
`delay`	`300`	Debounce delay in ms
`maxResults`	`10`	Cap number of shown items
`highlight`	`true`	Highlight matched substring in results
`source`	`null`	Array, async fn, or null (falls back to DOM items)
`labelKey`	`"label"`	Object property used as display label
`valueKey`	`"value"`	Object property used as value