eds-search-select

Overview

Searchable, source-agnostic select for HUGE option lists (countries, currencies, nationalities, …) — the generalised sibling of eds-kg-web-services-select.

It never talks to an external API directly. It either filters an inline options array client-side, or queries a VETTED, NAMED source through our own datasets registry (/api/v1/datasets/<source>/search), which returns the one normalised shape { items: [{label, value}], total, nextOffset }. Any messy upstream schema is flattened server-side by an adapter — the component stays dumb.

Rendering is result-capped (we render at most maxVisible rows and tell the user to keep typing) so a 5,000-item source never blows up the DOM. Remote sources are additionally bounded by the server’s page limit.

Properties

Property	Attribute	Description	Type	Default
`apiBase`	`api-base`	Base path for the datasets API.	`string`	`'/api/v1'`
`debounceMs`	`debounce-ms`	Debounce (ms) before a remote search fires.	`number`	`250`
`disabled`	`disabled`		`boolean`	`false`
`error`	`error`		`boolean`	`false`
`errorMessage`	`error-message`		`string`	`undefined`
`hint`	`hint`		`string`	`undefined`
`label`	`label`		`string`	`undefined`
`limit`	`limit`	Server page size for remote sources.	`number`	`50`
`maxVisible`	`max-visible`	Max rows rendered at once (DOM cap).	`number`	`100`
`message`	`message`		`string`	`undefined`
`multiple`	`multiple`	Allow selecting multiple values — selections render as removable tags.	`boolean`	`false`
`name` (required)	`name`		`string`	`undefined`
`options`	`options`	Inline options: an array or a JSON string of [{label, value}].	`Option[] \| string`	`undefined`
`placeholder`	`placeholder`		`string`	`'Search…'`
`required`	`required`		`boolean`	`false`
`searchParam`	`search-param`	Query param name the search term is sent as.	`string`	`'q'`
`source`	`source`	A vetted registry source key, e.g. “countries” / “currencies”.	`string`	`undefined`
`value`	`value`	Selected value. A single value string in single-select mode, or an array of values in multi-select mode. v-model friendly.	`string \| string[]`	`undefined`

Events

Event	Description	Type
`edschange`		`CustomEvent<{ value: string \| boolean \| string[]; }>`
`edsinput`		`CustomEvent<{ value: string \| boolean \| string[]; }>`

Dependencies

Used by

eds-form

Depends on

Graph

graph TD;
  eds-search-select --> eds-input-label
  eds-search-select --> eds-icon-wrapper
  eds-search-select --> eds-input-footer
  eds-input-footer --> eds-icon-wrapper
  eds-input-footer --> eds-link
  eds-link --> eds-icon-wrapper
  eds-form --> eds-search-select
  style eds-search-select fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS