Components

<AisSearchBox>

Query input widget for full-text search.

Usage

<AisInstantSearch :configuration="configuration">
  <AisSearchBox placeholder="Search products" />
</AisInstantSearch>

Props

Prop	Type	Default	Description
`placeholder`	`string`	`""`	Input placeholder text.
`autofocus`	`boolean`	`false`	Focus input on mount.
`showLoadingIndicator`	`boolean`	`true`	Shows a loading indicator slot while searching.
`shouldShowLoadingIndicator`	`boolean`	`false`	Forces loading indicator visibility in custom scenarios.
`ignoreCompositionEvents`	`boolean`	`false`	Useful for IME behavior handling.
`submitTitle`	`string`	`"Submit the search query"`	Accessible title for submit action.
`resetTitle`	`string`	`"Clear the search query"`	Accessible title for reset action.
`queryHook`	`function`	connector default	Intercepts query updates before refine.
`modelValue`	`string`	connector state	Optional controlled value.

Emits

update:modelValue
input
focus
blur
reset

Slots

Slot	Slot props	Description
`default`	`{ currentRefinement, isSearchStalled, refine }`	Full custom search input rendering.
`loading-indicator`	none	Replaces the default loading indicator icon.
`submit-icon`	none	Replaces the submit icon.
`reset-icon`	none	Replaces the reset icon.

End-to-end example

<AisSearchBox>
  <template #default="{ currentRefinement, isSearchStalled, refine }">
    <label>
      <span class="sr-only">Search</span>
      <input
        :value="currentRefinement"
        type="search"
        placeholder="Search products"
        @input="refine(($event.currentTarget as HTMLInputElement).value)"
      >
    </label>

    <p v-if="isSearchStalled">Searching...</p>
  </template>
</AisSearchBox>

Edit this pageorReport an issue

Injects InstantSearch search parameters without rendering UI.

Declares a nested index scope inside a parent InstantSearch tree.