Ais-Search-Box | Angular InstantSearch V4 (Deprecated)

Signature

<ais-search-box
  // Optional parameters
  placeholder="string"
  submitTitle="string"
  resetTitle="string"
  [searchAsYouType]="boolean"
  [autofocus]="boolean"
  [showLoadingIndicator]="boolean"
></ais-search-box>

1
2
3
4
5
6
7
8
import { NgAisSearchBoxModule } from 'angular-instantsearch';

@NgModule({
  imports: [
    NgAisSearchBoxModule,
  ],
})
export class AppModule {}

1
2
3
4
5
6
7
8
import { NgAisModule } from 'angular-instantsearch';

@NgModule({
  imports: [
    NgAisModule.forRoot(),
  ],
})
export class AppModule {}

About this widget

The ais-search-box widget is used to let users set a text-based query.

This usually is the main entry point to start search in an InstantSearch context. Most of the time, it is placed at the top of a search experience, so that users can start searching right away.

Examples

1
<ais-search-box></ais-search-box>

Props

placeholder

The input placeholder.

1
2
3
<ais-search-box
  placeholder="Search for products..."
></ais-search-box>

submitTitle

The submit button text.

1
2
3
<ais-search-box
  submitTitle="Go"
></ais-search-box>

resetTitle

The clear button text.

1
2
3
<ais-search-box
  resetTitle="Clear"
></ais-search-box>

searchAsYouType

Whether a search needs to be made on every change to the query. If false, new searches are only triggered by clicking the search button or by pressing the Enter key while the search box is focused.

1
2
3
<ais-search-box
  [searchAsYouType]="false"
></ais-search-box>

autofocus

Whether to automatically focus on the input when rendered.

1
2
3
<ais-search-box
  [autofocus]="true"
></ais-search-box>

showLoadingIndicator

Displays an indicator that the search is loading. The loading indicator is only shown if Algolia doesn’t return the search results within a time limit. On faster network connections, this avoids unnecessarily rendering the loading indicator on every keystroke, while on slower connections, it provides good user feedback. You can adjust the time limit before rendering the loading indicator with the stalledSearchDelay parameter on the ais-instantsearch component.

1
2
3
<ais-search-box
  [showLoadingIndicator]="false"
></ais-search-box>