Updateing Docs
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
# Autocomplete
|
||||
|
||||
Searchable dropdown with autocomplete functionality, keyboard navigation, and reactive options.
|
||||
Searchable dropdown with autocomplete functionality, keyboard navigation, and reactive items.
|
||||
|
||||
## Tag
|
||||
|
||||
@@ -8,14 +8,38 @@ Searchable dropdown with autocomplete functionality, keyboard navigation, and re
|
||||
|
||||
## 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) |
|
||||
| Prop | Type | Default | Description |
|
||||
| :--- | :--- | :--- | :--- |
|
||||
| `class` | `string` | `''` | Additional CSS classes for the container |
|
||||
| `items` | `Array<string \| {value: string, label: string}> \| Signal` | `[]` | Items to search from |
|
||||
| `value` | `string \| Signal<string>` | `''` | Selected value (reactive) |
|
||||
| `onSelect` | `function(item)` | `-` | Called when an option is selected |
|
||||
| `label` | `string` | `-` | Label text for the input |
|
||||
| `placeholder` | `string` | `'Search...'` | Placeholder text |
|
||||
|
||||
## Styling
|
||||
|
||||
Autocomplete wraps a **daisyUI Input component** internally. All Input styling classes work:
|
||||
|
||||
| Category | Keywords | Description |
|
||||
| :--- | :--- | :--- |
|
||||
| Color | `input-primary`, `input-secondary`, `input-accent`, `input-ghost`, `input-info`, `input-success`, `input-warning`, `input-error` | Input color variants |
|
||||
| Size | `input-xs`, `input-sm`, `input-md`, `input-lg` | Input scale |
|
||||
| Style | `input-bordered` (default), `input-ghost` | Visual style variants |
|
||||
|
||||
> For further details, check the [daisyUI Input Documentation](https://daisyui.com/components/input) – Full reference for CSS classes.
|
||||
|
||||
### Example
|
||||
|
||||
```javascript
|
||||
Autocomplete({
|
||||
class: "input-primary input-lg",
|
||||
items: fruits,
|
||||
value: selected,
|
||||
onSelect: (value) => selected(value)
|
||||
});
|
||||
// Applies: primary color, large size
|
||||
```
|
||||
|
||||
## Live Examples
|
||||
|
||||
@@ -34,8 +58,7 @@ const BasicDemo = () => {
|
||||
const fruits = ['Apple', 'Banana', 'Orange', 'Grape', 'Strawberry', 'Mango', 'Pineapple', 'Watermelon'];
|
||||
|
||||
return Autocomplete({
|
||||
label: 'Search fruit',
|
||||
options: fruits,
|
||||
items: fruits,
|
||||
value: selected,
|
||||
onSelect: (value) => selected(value)
|
||||
});
|
||||
@@ -68,8 +91,7 @@ const ObjectsDemo = () => {
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4 w-full' }, [
|
||||
Autocomplete({
|
||||
label: 'Search country',
|
||||
options: countries,
|
||||
items: countries,
|
||||
value: selectedLabel,
|
||||
onSelect: (item) => {
|
||||
const selectedItem = typeof item === 'string'
|
||||
@@ -80,7 +102,7 @@ const ObjectsDemo = () => {
|
||||
}
|
||||
}),
|
||||
Div({ class: 'alert alert-success' }, [
|
||||
`Selected: ${selected()} - ${selectedLabel()}`
|
||||
() => `Selected: ${selected()} - ${selectedLabel()}`
|
||||
])
|
||||
]);
|
||||
};
|
||||
@@ -106,8 +128,7 @@ const ReactiveDemo = () => {
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4 w-full' }, [
|
||||
Autocomplete({
|
||||
label: 'Programming language',
|
||||
options: programmingLanguages,
|
||||
items: programmingLanguages,
|
||||
value: selected,
|
||||
onSelect: (value) => selected(value)
|
||||
}),
|
||||
@@ -119,7 +140,7 @@ const ReactiveDemo = () => {
|
||||
$mount(ReactiveDemo, '#demo-reactive');
|
||||
```
|
||||
|
||||
### Dynamic Options
|
||||
### Dynamic Items
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
@@ -141,8 +162,7 @@ const DynamicDemo = () => {
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4 w-full' }, [
|
||||
Select({
|
||||
label: 'Category',
|
||||
options: [
|
||||
items: [
|
||||
{ value: 'all', label: 'All items' },
|
||||
{ value: 'fruits', label: 'Fruits' },
|
||||
{ value: 'vegetables', label: 'Vegetables' }
|
||||
@@ -151,8 +171,7 @@ const DynamicDemo = () => {
|
||||
onchange: (e) => filterType(e.target.value)
|
||||
}),
|
||||
Autocomplete({
|
||||
label: 'Search item',
|
||||
options: () => allItems[filterType()],
|
||||
items: () => allItems[filterType()],
|
||||
value: selected,
|
||||
onSelect: (value) => selected(value)
|
||||
})
|
||||
@@ -177,27 +196,24 @@ const VariantsDemo = () => {
|
||||
return Div({ class: 'flex flex-col gap-4' }, [
|
||||
Div({}, [
|
||||
Autocomplete({
|
||||
label: 'Primary style',
|
||||
class: 'input-primary',
|
||||
options: colors,
|
||||
items: colors,
|
||||
value: $(''),
|
||||
placeholder: 'Search colors...'
|
||||
})
|
||||
]),
|
||||
Div({}, [
|
||||
Autocomplete({
|
||||
label: 'Secondary style',
|
||||
class: 'input-secondary',
|
||||
options: colors,
|
||||
items: colors,
|
||||
value: $(''),
|
||||
placeholder: 'Search colors...'
|
||||
})
|
||||
]),
|
||||
Div({}, [
|
||||
Autocomplete({
|
||||
label: 'Ghost style',
|
||||
class: 'input-ghost',
|
||||
options: colors,
|
||||
items: colors,
|
||||
value: $(''),
|
||||
placeholder: 'Search colors...'
|
||||
})
|
||||
@@ -205,172 +221,4 @@ const VariantsDemo = () => {
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, '#demo-variants');
|
||||
```
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const initAutocompleteExamples = () => {
|
||||
|
||||
// 1. Basic Autocomplete
|
||||
const basicTarget = document.querySelector('#demo-basic');
|
||||
if (basicTarget && !basicTarget.hasChildNodes()) {
|
||||
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, basicTarget);
|
||||
}
|
||||
|
||||
// 2. With Objects
|
||||
const objectsTarget = document.querySelector('#demo-objects');
|
||||
if (objectsTarget && !objectsTarget.hasChildNodes()) {
|
||||
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, objectsTarget);
|
||||
}
|
||||
|
||||
// 3. Reactive Display
|
||||
const reactiveTarget = document.querySelector('#demo-reactive');
|
||||
if (reactiveTarget && !reactiveTarget.hasChildNodes()) {
|
||||
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, reactiveTarget);
|
||||
}
|
||||
|
||||
// 4. Dynamic Options
|
||||
const dynamicTarget = document.querySelector('#demo-dynamic');
|
||||
if (dynamicTarget && !dynamicTarget.hasChildNodes()) {
|
||||
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, dynamicTarget);
|
||||
}
|
||||
|
||||
// 5. All Variants
|
||||
const variantsTarget = document.querySelector('#demo-variants');
|
||||
if (variantsTarget && !variantsTarget.hasChildNodes()) {
|
||||
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, variantsTarget);
|
||||
}
|
||||
};
|
||||
|
||||
initAutocompleteExamples();
|
||||
|
||||
if (window.$docsify) {
|
||||
window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
|
||||
hook.doneEach(initAutocompleteExamples);
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
```
|
||||
Reference in New Issue
Block a user