Multi Select / Autocomplete Component

[mh-alahdadian]

I searched docs and there is no select with multiple choice or something like autocomplete

is there a way to have it ?

[saadeghi]

daisyUI is a CSS library. It's a plugin for Tailwind CSS. There's no JS file.

For auto complete you can use use native HTML <datalist> element for a text input:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist

For selecting multiple values:

• you can use a package from NPM (and then apply daisyUI class names to it)
• you can alternatively use checkbox, or checkbox with btn class:
  https://daisyui.com/components/button/#buttons-with-different-html-tags

Let me know if you have a question.

[zbyte64]

Compared to other autocomplete solutions there are some key differences with this approach people should know:

• No option to see all available values, the options displayed will always be filtered by the value entered (Hero UI for example lets you click the down arrow to see all options even if a value is selected)
• Selected value displays value, not the label/display of the value defined in the datalist
• There is no X to clear selected value (is possible to style this, but no example on explicitly clearing the value)

For me the ability to have a separate display value is the biggest deficiency. Effectively I want a select input that lets you type to search or scan in a value while also displaying a pretty display name instead of a database id.