12 KiB
12 KiB
Autocomplete
Searchable dropdown with autocomplete functionality, keyboard navigation, and reactive options.
Tag
Autocomplete
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label |
string |
- |
Label text for the input |
options |
Array<string | {value: string, label: string}> |
[] |
Options to search from |
value |
string | Signal<string> |
'' |
Selected value |
placeholder |
string |
'Search...' |
Placeholder text |
onSelect |
function |
- |
Called when an option is selected |
class |
string |
'' |
Additional CSS classes (DaisyUI + Tailwind) |
Live Examples
Basic Autocomplete
Live Demo
const BasicDemo = () => {
const selected = $('');
const fruits = ['Apple', 'Banana', 'Orange', 'Grape', 'Strawberry', 'Mango', 'Pineapple', 'Watermelon'];
return Autocomplete({
label: 'Search fruit',
options: fruits,
value: selected,
onSelect: (value) => selected(value)
});
};
$mount(BasicDemo, '#demo-basic');
With Objects
Live Demo
const ObjectsDemo = () => {
const selected = $('');
const selectedLabel = $('');
const countries = [
{ value: 'mx', label: 'Mexico' },
{ value: 'us', label: 'United States' },
{ value: 'ca', label: 'Canada' },
{ value: 'br', label: 'Brazil' },
{ value: 'ar', label: 'Argentina' },
{ value: 'es', label: 'Spain' }
];
return Div({ class: 'flex flex-col gap-4 w-full' }, [
Autocomplete({
label: 'Search country',
options: countries,
value: selectedLabel,
onSelect: (item) => {
const selectedItem = typeof item === 'string'
? countries.find(c => c.label === item)
: item;
selected(selectedItem?.value || '');
selectedLabel(selectedItem?.label || '');
}
}),
Div({ class: 'alert alert-success' }, [
`Selected: ${selected()} - ${selectedLabel()}`
])
]);
};
$mount(ObjectsDemo, '#demo-objects');
With Reactive Display
Live Demo
const ReactiveDemo = () => {
const selected = $('');
const programmingLanguages = [
'JavaScript', 'Python', 'Java', 'C++', 'Ruby', 'Go', 'Rust', 'TypeScript', 'Swift', 'Kotlin'
];
return Div({ class: 'flex flex-col gap-4 w-full' }, [
Autocomplete({
label: 'Programming language',
options: programmingLanguages,
value: selected,
onSelect: (value) => selected(value)
}),
() => selected() ? Div({ class: 'alert alert-info' }, [
`You selected: ${selected()}`
]) : null
]);
};
$mount(ReactiveDemo, '#demo-reactive');
Dynamic Options
Live Demo
const DynamicDemo = () => {
const selected = $('');
const filterType = $('all');
const allItems = {
fruits: ['Apple', 'Banana', 'Orange', 'Mango'],
vegetables: ['Carrot', 'Broccoli', 'Spinach', 'Potato'],
all: ['Apple', 'Banana', 'Orange', 'Mango', 'Carrot', 'Broccoli', 'Spinach', 'Potato']
};
return Div({ class: 'flex flex-col gap-4 w-full' }, [
Select({
label: 'Category',
options: [
{ value: 'all', label: 'All items' },
{ value: 'fruits', label: 'Fruits' },
{ value: 'vegetables', label: 'Vegetables' }
],
value: filterType,
onchange: (e) => filterType(e.target.value)
}),
Autocomplete({
label: 'Search item',
options: () => allItems[filterType()],
value: selected,
onSelect: (value) => selected(value)
})
]);
};
$mount(DynamicDemo, '#demo-dynamic');
All Variants
Live Demo
const VariantsDemo = () => {
const colors = ['Red', 'Blue', 'Green', 'Yellow', 'Purple', 'Orange', 'Pink', 'Brown', 'Black', 'White'];
return Div({ class: 'flex flex-col gap-4' }, [
Div({}, [
Autocomplete({
label: 'Primary style',
class: 'input-primary',
options: colors,
value: $(''),
placeholder: 'Search colors...'
})
]),
Div({}, [
Autocomplete({
label: 'Secondary style',
class: 'input-secondary',
options: colors,
value: $(''),
placeholder: 'Search colors...'
})
]),
Div({}, [
Autocomplete({
label: 'Ghost style',
class: 'input-ghost',
options: colors,
value: $(''),
placeholder: 'Search colors...'
})
])
]);
};
$mount(VariantsDemo, '#demo-variants');