Updated
This commit is contained in:
@@ -14,7 +14,7 @@ Searchable dropdown with autocomplete functionality, keyboard navigation, and re
|
||||
| `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 |
|
||||
| `onselect` | `function` | `-` | Called when an option is selected |
|
||||
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
|
||||
|
||||
## Live Examples
|
||||
@@ -37,7 +37,7 @@ const BasicDemo = () => {
|
||||
label: 'Search fruit',
|
||||
options: fruits,
|
||||
value: selected,
|
||||
onSelect: (value) => selected(value)
|
||||
onselect: (value) => selected(value)
|
||||
});
|
||||
};
|
||||
Mount(BasicDemo, '#demo-basic');
|
||||
@@ -71,7 +71,7 @@ const ObjectsDemo = () => {
|
||||
label: 'Search country',
|
||||
options: countries,
|
||||
value: selectedLabel,
|
||||
onSelect: (item) => {
|
||||
onselect: (item) => {
|
||||
const selectedItem = typeof item === 'string'
|
||||
? countries.find(c => c.label === item)
|
||||
: item;
|
||||
@@ -109,7 +109,7 @@ const ReactiveDemo = () => {
|
||||
label: 'Programming language',
|
||||
options: programmingLanguages,
|
||||
value: selected,
|
||||
onSelect: (value) => selected(value)
|
||||
onselect: (value) => selected(value)
|
||||
}),
|
||||
() => selected() ? Div({ class: 'alert alert-info' }, [
|
||||
`You selected: ${selected()}`
|
||||
@@ -154,7 +154,7 @@ const DynamicDemo = () => {
|
||||
label: 'Search item',
|
||||
options: () => allItems[filterType()],
|
||||
value: selected,
|
||||
onSelect: (value) => selected(value)
|
||||
onselect: (value) => selected(value)
|
||||
})
|
||||
]);
|
||||
};
|
||||
@@ -222,7 +222,7 @@ Mount(VariantsDemo, '#demo-variants');
|
||||
label: 'Search fruit',
|
||||
options: fruits,
|
||||
value: selected,
|
||||
onSelect: (value) => selected(value)
|
||||
onselect: (value) => selected(value)
|
||||
});
|
||||
};
|
||||
Mount(BasicDemo, basicTarget);
|
||||
@@ -249,7 +249,7 @@ Mount(VariantsDemo, '#demo-variants');
|
||||
label: 'Search country',
|
||||
options: countries,
|
||||
value: selectedLabel,
|
||||
onSelect: (item) => {
|
||||
onselect: (item) => {
|
||||
const selectedItem = typeof item === 'string'
|
||||
? countries.find(c => c.label === item)
|
||||
: item;
|
||||
@@ -280,7 +280,7 @@ Mount(VariantsDemo, '#demo-variants');
|
||||
label: 'Programming language',
|
||||
options: programmingLanguages,
|
||||
value: selected,
|
||||
onSelect: (value) => selected(value)
|
||||
onselect: (value) => selected(value)
|
||||
}),
|
||||
() => selected() ? Div({ class: 'alert alert-info' }, [
|
||||
`You selected: ${selected()}`
|
||||
@@ -318,7 +318,7 @@ Mount(VariantsDemo, '#demo-variants');
|
||||
label: 'Search item',
|
||||
options: () => allItems[filterType()],
|
||||
value: selected,
|
||||
onSelect: (value) => selected(value)
|
||||
onselect: (value) => selected(value)
|
||||
})
|
||||
]);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user