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

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} [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} [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.
• 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