Searching and filtering

Svelecte supports filtering available options based on what you write. This functionality is controlled by searchable property and is enabled by default and all first child properties are searchable.

Seach and filtering capabilities are provided by sifter.js internally and search settings has been extended for more granular search settings in v4.0.

🧩 Playground

Now searching in properties: name.
Try switching to or search by typing | between other words. For example b c vs b | c

Select search field: Keep selected options in results Nesting (select ID from search field select) Skip sorting results Search by first letters Respect word boundaries Disable filtering

Settings

Customizing search is possible by passing searchProps property and can have following structure. All properties are optional and boolean values are false by default.

 /**
  * @typedef {object} SearchProps
  * @property {string|string[]} [fields]
  * @property {string|SortDef[]} [sort]
  * @property {boolean} [skipSort]
  * @property {'or'} [conjunction]
  * @property {boolean} [keepSelectionInList]
  * @property {boolean} [nesting]
  * @property {boolean} [disabled]
  * @property {boolean} [startOnly]
  * @property {boolean} [wordsOnly]
  *
  *
  * @typedef {object} SortDef
  * @property {string} field
  * @property {'asc'|'desc'} [direction]
  */

 /**
  * @typedef {object} SearchProps
  * @property {string|string[]} [fields]
  * @property {string|SortDef[]} [sort]
  * @property {boolean} [skipSort]
  * @property {'or'} [conjunction]
  * @property {boolean} [keepSelectionInList]
  * @property {boolean} [nesting]
  * @property {boolean} [disabled]
  * @property {boolean} [startOnly]
  * @property {boolean} [wordsOnly]
  *
  *
  * @typedef {object} SortDef
  * @property {string} field
  * @property {'asc'|'desc'} [direction]
  */

fields allow you to specify which properties are used for search. In combination with nesting parameter you can specify also nested properties with dot notation like my.nested.property.
sort define sort properties which search result sorting is based upon.
skipSort sorting can be turned off.
conjuction defaults to and, defines how multiple words are searched. or can be turned on directly when entering text by typing | character.
keepSelectionInList allow matched selected options to stay visible
nesting allow for search in nested properties, as mentions in fields description
disabled when true no option is filtered out, just searched phrase is highlighted (which can be disabled by disabledHighlighting property)
startOnly search only from beginning of the string
wordsOnly respects word boundaries

Made with Svelte ❤ by Martin Skocik.
♦
You can support me through GitHub.