### File

`packages/components/layout/eui-toolbar/toolbar-search/toolbar-search.component.ts`

### Description

Toolbar search component providing an expandable search input with autocomplete or plain text input modes. Offers flexible search functionality with optional search button, expand animation, and custom result templates. Supports two modes: autocomplete with dropdown suggestions or simple text input with enter-to-search. Integrates with EuiAppShellService for responsive behavior and theme coordination. Emits events for search actions, selection changes, and focus state for parent components to handle search logic.

Example :

    <!-- Autocomplete mode -->
    <eui-app>
      <eui-app-toolbar>
        <eui-toolbar>
          <eui-toolbar-search
            [isAutocomplete]="true"
            [searchResults]="searchResults"
            placeholderLabel="Search..."
            (search)="onSearch($event)"
            (selectionChange)="onSelectionChange($event)">
          </eui-toolbar-search>
        </eui-toolbar>
      </eui-app-toolbar>
    </eui-app>

    <!-- Text input mode -->
    <eui-toolbar-search
      [isInputText]="true"
      [hasSearchButton]="true"
      (search)="onSearch($event)">
    </eui-toolbar-search>

Example :

    searchResults: EuiAutoCompleteItem[] = [
      { id: 1, label: 'Result 1' },
      { id: 2, label: 'Result 2' }
    ];

### Accessibility

- Search input keyboard accessible
- Enter key triggers search
- Focus and blur events managed
- Placeholder provides context
- Autocomplete dropdown keyboard navigable
- Search button keyboard accessible

### Notes

- Must be used within eui-toolbar for proper layout
- Two modes: autocomplete (default) or text input
- isAutocomplete and isInputText are mutually exclusive
- Default mode is autocomplete if neither specified
- searchResults for autocomplete suggestions
- hasSearchButton adds explicit search button
- hasExpandAnimation controls focus expansion (default: true)
- panelWidth for autocomplete dropdown (default: '25vw')
- search event on Enter key or autocomplete change
- selectionChange event for autocomplete selections
- searchClick event for button clicks
- inputFocus/inputBlur events for focus state
- Custom result templates via EuiTemplateDirective
- Focus state applies 'eui-toolbar-search--focus' class
- Integrates with EuiAppShellService

### Implements

`AfterViewInit` `AfterContentInit`

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
selector | `eui-toolbar-search`
imports | `EUI_BUTTON` `EUI_ICON` `EUI_ICON_BUTTON` `EUI_AUTOCOMPLETE` `EUI_ICON_INPUT` `EUI_INPUT_TEXT` `EuiTemplateDirective` `NgTemplateOutlet` `FormsModule` `AsyncPipe`
templateUrl | `./toolbar-search.component.html`
styleUrl | `./toolbar-search.component.scss`

### Index

###### Properties
isInputFocus Public resultItemTemplate searchInput searchTerm templates
###### Methods
onInputBlur onInputFocus onSearch onSearchClick onSearchInput onSelectionChange
###### Inputs
hasExpandAnimation hasSearchButton isAutocomplete isInputText panelWidth placeholderLabel searchResults
###### Outputs
inputBlur inputFocus search searchClick selectionChange
###### HostBindings
class
###### Accessors
cssClasses

### Inputs

hasExpandAnimation
Type : `boolean`
Default value : `true`
Enables expand animation when search input gains focus. When true, animates the input field expansion. When false, input expands instantly.

hasSearchButton
Type : `boolean`
Default value : `false`
Shows a search button next to the input field. When true, displays a button to trigger search action explicitly.

isAutocomplete
Type : `boolean`
Default value : `false`
Enables autocomplete mode with dropdown suggestions. When true, displays autocomplete dropdown. Automatically disables isInputText.

isInputText
Type : `boolean`
Default value : `false`
Enables plain text input mode without autocomplete. When true, displays simple text input. Automatically disables isAutocomplete.

panelWidth
Type : `string`
Default value : `'25vw'`
Width of the autocomplete dropdown panel. Accepts any valid CSS width value.

placeholderLabel
Type : `string`
Placeholder text displayed in the search input when empty. Provides hint text to guide users on what they can search for. Optional.

searchResults
Type : `EuiAutoCompleteItem[]`
Default value : `[]`
Array of autocomplete suggestion items displayed in the dropdown. Only used when isAutocomplete is true. Each item should conform to EuiAutoCompleteItem interface.

### Outputs

inputBlur
Type : `EventEmitter<Event>`
Emitted when the search input loses focus. Payload: Event - the blur event Triggered when user leaves the search input field, unless search button is present and input has value.

inputFocus
Type : `EventEmitter<Event>`
Emitted when the search input gains focus. Payload: Event - the focus event Triggered when user focuses on the search input field.

search
Type : `EventEmitter<string>`
Emitted when a search is performed via Enter key or autocomplete input change. Payload: string - the search term entered by the user Triggered on Enter key press in text input mode or autocomplete input change.

searchClick
Type : `EventEmitter<string>`
Emitted when the search button is clicked. Payload: string - the current search input value, or null if icon-only mode Triggered when user clicks the search button (when hasSearchButton is true).

selectionChange
Type : `EventEmitter<EuiAutoCompleteItem[]>`
Emitted when autocomplete selection changes. Payload: EuiAutoCompleteItem[] - array of selected autocomplete items Triggered when user selects or deselects items in autocomplete mode.

### HostBindings

class
Type : `string`

### Methods

onInputBlur
`onInputBlur()`
Returns : `void`

onInputFocus
`onInputFocus()`
Returns : `void`

onSearch
`onSearch(e: string)`
Parameters :
Name | Type | Optional
e | `string` | No
Returns : `void`

onSearchClick
`onSearchClick(isIconOnly: boolean)`
Parameters :
Name | Type | Optional
isIconOnly | `boolean` | No
Returns : `void`

onSearchInput
`onSearchInput(e: KeyboardEvent)`
Parameters :
Name | Type | Optional
e | `KeyboardEvent` | No
Returns : `void`

onSelectionChange
`onSelectionChange(items: EuiAutoCompleteItem[])`
Parameters :
Name | Type | Optional
items | `EuiAutoCompleteItem[]` | No
Returns : `void`

### Properties

isInputFocus
Type : `unknown`
Default value : `false`

Public resultItemTemplate
Type : `TemplateRef<literal type>`

searchInput
Type : `string`
Default value : `''`

searchTerm
Type : `string`

templates
Type : `QueryList<EuiTemplateDirective>`
Decorators : `@ContentChildren(EuiTemplateDirective)`

### Accessors

cssClasses
get `cssClasses()`

# results matching ""

# No results matching ""