Flexible autocomplete/select component written in Svelte. Massively inspired by Selectize.js. Also usable as custom element (CE). Usable in forms, behaves very similar to standard <select> element.
- searchable
- multiselect with limit of max selected items
- allow simple array or complex objects as items
- custom item renderer (formatter)
- allow creating new items
- remote data fetch
- virtual list support
- usable as custom element
- i18n support
- SSR support
- lazy dropdown rendering
npm install svelecte --save
👉 Examples with detailed documentation can be found at https://mskocik.github.io/svelecte-docs/.
| Property | Type | Default | Description |
|---|---|---|---|
| options | array | [] |
Data array |
| valueField | string | null |
Property to be used as value (if not specified, will be selected automatically) |
| labelField | string | null |
Property shown in dropdown (if not specified, will be selected automatically) |
| required | bool | false |
make sense only when name is defined |
| placeholder | string | 'Select' |
Input placeholder |
| searchable | bool | true |
Allow search among items by typing |
| disabled | bool | false |
Disable component |
| renderer | string|function | null |
dropdown and selection renderer function. More info in item rendering section |
| selectOnTab | bool | false |
Allow selecting currently active item by Tab key |
| resetOnBlur | bool | true |
Control if input value should be cleared on blur |
| clearable | bool | false |
Display ✖ icon to clear whole selection |
| multiple | bool | false |
allow multiselection. Will be set automatically to true, if name property ends with [], like tags[] |
| max | number | 0 |
Maximum allowed items selected, applicable only for multiselect |
| collapseSelection | bool | false |
collapse selection when multiple and not focused |
| name | string | null |
create <select>, usable for normal forms. |
| creatable | bool | false |
Allow creating new item(s) |
| creatablePrefix | string | '*' |
Prefix marking new item |
| delimiter | string | ',' |
split inserted text when pasting to create multiple items |
| fetch | string|function | null |
Check "remote datasource" section for more details |
| fetchMode | string | 'auto' |
When set to init options are fetched only when mounted, when searching it search in downloaded dataset |
| fetchCallback | function | null |
optional fetch callback |
| fetchResetOnBlur | bool | true |
reset previous search results on empty input, related to resetOnBlur |
| lazyDropdown | bool | true |
render dropdown after first focus, not by default |
| virtualList | bool | false |
Whether use virtual list for dropdown items (useful for large datasets) |
| vlHeight | number | null |
Height of virtual list dropdown (if not specified, computed automatically) |
| vlItemSize | number | null |
Height of one row (if not specified, computed automatically) |
| searchField | string|array | null |
Specify item property that will be used to search by (if not specified all props except value prop will be used) |
| sortField | string | null |
Specify sort property. If not specified, labelField will be used |
| disableSifter | bool | false |
Disable Sifter filtering & sorting. Can be useful in combination with fetch, when further filtering or sorting may be undesired |
| disableHighlight | bool | false |
Disable highlighting of input value in results. Can be useful with a renderer function that includes additional text or does its own highlighting |
| class | string | 'svelecte-control' |
default css class |
| style | string | null |
inline style |
| hasAnchor | bool | null |
internal: when passing also existing select (for CE) |
| Event | arguments | description |
|---|---|---|
| fetch | options | newly fetched remote options |
| change | selection | selected objects * if anchor is defined, change event is called also on it |
| Name | type | arguments | description |
|---|---|---|---|
| selection | property | - | setter/getter - selected value(s) as objects, for binding. For usage in Svelte |
| focus | function | - | focus input |
| getSelection | function | bool | return selection, if true is passed, only values are returns, whole objects otherwise |
| setSelection | function | array | set selection programmatically |
| config | property | - | context property: global common config for all instances, you can override most properties here and also some additional, mainly i18n |
| addFormatter | function | - | context function: with signature (name, formatFn) you can add additional item renderers (formatters) |
- selectize.js - inspiration
- sifter - search engine
- svelte-select - inspiration & how-to, including some code borrowing 😊
- svelte-tiny-virtual-list virtual list capability