sigpro-ui/docs/components/autocomplete.md

Autocomplete

Searchable dropdown with autocomplete functionality, keyboard navigation, and reactive items.

Tag

Autocomplete

Props

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 – Full reference for CSS classes.

Live Examples

Basic Autocomplete

Live Demo

const BasicDemo = () => {
  const selected = $('');
  const fruits = ['Apple', 'Banana', 'Orange', 'Grape', 'Strawberry', 'Mango', 'Pineapple', 'Watermelon'];
  
  return Autocomplete({
    items: 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({
      items: 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({
      items: programmingLanguages,
      value: selected,
      onselect: (value) => selected(value)
    }),
    () => selected() ? Div({ class: 'alert alert-info' }, [
      `You selected: ${selected()}`
    ]) : null
  ]);
};
Mount(ReactiveDemo, '#demo-reactive');

Dynamic Items

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({
      items: [
        { value: 'all', label: 'All items' },
        { value: 'fruits', label: 'Fruits' },
        { value: 'vegetables', label: 'Vegetables' }
      ],
      value: filterType,
      onchange: (e) => filterType(e.target.value)
    }),
    Autocomplete({
      items: () => 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({
        class: 'input-primary',
        items: colors,
        value: $(''),
        placeholder: 'Search colors...'
      })
    ]),
    Div({}, [
      Autocomplete({
        class: 'input-secondary',
        items: colors,
        value: $(''),
        placeholder: 'Search colors...'
      })
    ]),
    Div({}, [
      Autocomplete({
        class: 'input-ghost',
        items: colors,
        value: $(''),
        placeholder: 'Search colors...'
      })
    ])
  ]);
};
Mount(VariantsDemo, '#demo-variants');