options

Description

Predefined value suggestions per field, shown in the autocomplete dropdown as the user types

Usage

options?: IDataHash<AnyData[]>;

Default: {}

The IDataHash type is a plain object keyed by field ID:

type IDataHash<T> = { [fieldId: string]: T };

Key	Type	Description
[fieldId]	AnyData[]	Suggestion list for the field with that ID
"#"	AnyData[]	Suggestions for tag (#value) searches

Example

<script>
  import { FilterQuery } from "@svar-ui/svelte-filter";

  const fields = [
    { id: "status", label: "Status", type: "text" },
    { id: "country", label: "Country", type: "text" },
  ];

  const options = {
    status: ["Open", "In Progress", "Closed"],
    country: ["USA", "UK", "Australia", "Austria"],
    "#": ["urgent", "blocked", "reviewed"],
  };
</script>

<FilterQuery {fields} {options} />

Details

The options prop provides autocomplete value suggestions for each field. When a user types a value after a field name, the dropdown shows matching entries from the corresponding array in this hash. If options is not defined for a field, value autocomplete is disabled for that field. Users can still enter values manually, but no suggestions are shown.

The special key "#" defines suggestions for tag searches (for example, #Urgent). Values that do not match any listed option are still accepted by the parser unless strict validation is enabled via the fields configuration.

---

Related articles: Configuring fields