Note

This documentation describes the GlobalSearchInput Vue component for native UI views, for Xml templates see global-search-input.

GlobalSearchInput

An inline search input that performs a debounced global search (500 ms). Exposes search results via scoped slot.

Import

import { GlobalSearchInput } from '@neos/app'

Props

Prop	Type	Default	Description
onSearch	(query: string) => Promise<void>	undefined	Custom search handler
onKeyEnter	(query: string, result: unknown) => void	undefined	Called when Enter is pressed
iconSize	Size	'small'	Size of the search icon

Emits

Event	Description
close	Emitted when the user clears the input or presses Escape

Slots

Slot	Scope	Description
default	{ result: unknown, isSearching: boolean }	Renders search results returned by onSearch

Usage Examples

Search input with custom results

<GlobalSearchInput :on-search="search" :on-key-enter="navigate" @close="reset">
  <template v-slot="{ result, isSearching }">
    <Spinner v-if="isSearching" />
    <div v-else-if="result">
      <div v-for="item in result.items" :key="item.id" @click="navigate(null, item)">
        {{ item.label }}
      </div>
    </div>
  </template>
</GlobalSearchInput>