Search bar
EuiSearchBar's usage is specific to Elasticsearch's Query DSL (domain specific language).
For more generic search use cases, consider using the basic
An EuiSearchBar is a toolbar that enables the user to create/define a search query. This can be done either by entering the query syntax in a search box or by clicking any of the configured filters. The query language is not meant to be full blown search language for arbitrary data (e.g. as required in the Discover App in Kibana), yet it does provide some useful features:
- Search
terms- one can simply type search terms (free text words) - Example,website -production. In this example the intention is to find all items that have the "website" terms in them but do not have the word "production". Terms are AND'd together by default. - Phrases can be matched by surrounding multiple words with quotes - Example,
"website url". - Field/value search - one can search for terms within specific fields - Example,
tag:bug -severity:high. In this example the intention is to find all items that have "bug" in theirtagfield but do not have "high" in theirseverityfield. It is also possible to define range queries on numeric and date fields. For example,followers>=10will only match items that have 10 followers or above. Andcreated>'12 Jan 2018'will only match items that were created after 12th January 2018. isclauses - a simple boolean filter over a flag - Example,is:open -is:assigned. In this example the intention is to find all items that are flagged asopenbut are not flagged asassignedor groupclauses - allowing multiple clauses to be OR'd together - Example,(is:active OR owner:dewey) followers>5. In this example the intention is to find all items that areactiveOR owned bydewey, and have more than 5followers- Operators for partial text match
:, exact text match=, greater than>, greater than or equal>=, less than<, and less than or equal<=.
While the user can use the syntax described above to enter queries in the search box, it is possible to provide the user help with the syntax using filters. The filters are UI controls that can manipulate the query. The available filters are:
field_value_selection- A filter to manipulate field/value clauses. The filter is associated with a field name, and provides the user a list of value options to choose from. This filter can be configured to be single or multi select. In a single select mode, only one field filter will be added and replaced when the user changes the selection. In multi-select mode, a new filter will be added for each value selection. It is the intention for all these field clauses to be ANDed.field_value_toggle- A filter to manipulate a single field/value clause. The filter is associated with a field name and a value. When the user clicks the control (button) the field/value filter is added/removed to/from the query.field_value_toggle_group- Similar to thefield_value_toggleabove, except here you can define multiple values that will be displayed as a group of toggle buttons.is- A toggle button that is associated with a flag name and when clicked it toggles this flag back and forth (adds/removed anis:clause to/from the query).
Date parsing
Date values can be used for equality or range tests when the schema prop specifies the field as a date type (the created field in the demo below is a date), and must be enclosed in single quotes. E.g. created:'2019-01-01', created>='3rd January 2017'
Formats understood by the parser
- relative
yesterdaytodaytomorrow
- absolute (parsed by Moment.js's `utc` method)
dddddddD MMM YYDo MMM YYD MMM YYYYDo MMM YYYYDD MMM YYDD MMM YYYYD MMMM YYDo MMMM YYD MMMM YYYYDo MMMM YYYYDD MMMM YYDD MMMM YYYYYYYY-MM-DD
Controlled search bar
An EuiSearchBar can have its query controlled by a parent component by passing the query prop. Changes to the query will be passed back up through the onChange callback where the new query must be stored in state and passed back into the search bar.
Search bar filters
An EuiSearchBar can have custom filter dropdowns that control how a user can search.
Props
EuiSearchBar
Prop | Description and type | Default value |
|---|---|---|
Prop onChange# | Description and type Type: (args: EuiSearchBarOnChangeArgs) => boolean | void | Default value |
Prop defaultQuery# | Description and type The initial query the bar will hold when first mounted QueryType | Default value |
Prop query# | Description and type If you wish to use the search bar as a controlled component, continuously pass the query via this prop. QueryType | Default value |
Prop box# | Description and type Configures the search box. Set EuiFieldSearchProps & { schema?: boolean | SchemaType; } | Default value |
Prop filters# | Description and type An array of search filters. See #SearchFilterConfig. SearchFilterConfig[] | Default value |
Prop toolsLeft# | Description and type Tools which go to the left of the search bar. Tools | Default value |
Prop toolsRight# | Description and type Tools which go to the right of the search bar. Tools | Default value |
Prop dateFormat# | Description and type Date formatter to use when parsing date values object | Default value |
Prop hint# | Description and type Hint to render below the search bar { content: React.ReactNode; popoverProps?: Partial<Pick<EuiInputPopoverProps, "zIndex" | "fullWidth" | "data-test-subj" | "isOpen" | "repositionOnScroll" | "closePopover" | "panelClassName" | ... 4 more ... | "disableFocusTrap">>; } | Default value |
Prop className# | Description and type Type: string | Default value |
Prop aria-label# | Description and type Type: string | Default value |
Prop data-test-subj# | Description and type Type: string | Default value |
Prop css# | Description and type Type: Interpolation<Theme> | Default value |