Search bar
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 theirtag
field but do not have "high" in theirseverity
field. It is also possible to define range queries on numeric and date fields. For example,followers>=10
will only match items that have 10 followers or above. Andcreated>'12 Jan 2018'
will only match items that were created after 12th January 2018. is
clauses - 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 asopen
but are not flagged asassigned
or group
clauses - 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 areactive
OR 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_toggle
above, 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
yesterday
today
tomorrow
- absolute (parsed by Moment.js's `utc` method)
ddd
dddd
D MMM YY
Do MMM YY
D MMM YYYY
Do MMM YYYY
DD MMM YY
DD MMM YYYY
D MMMM YY
Do MMMM YY
D MMMM YYYY
Do MMMM YYYY
DD MMMM YY
DD MMMM YYYY
YYYY-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.