For more info please check the components's official demos & documentation demos & documentation

A typeahead example that gets values from a static string[]

  • debounceTime operator
  • kicks in only if 2+ characters typed
  • limits to 10 results

Model: {{ model | json }}

It is possible to get the focus events with the current input value to emit results on focus with a great flexibility. In this simple example, a search is done no matter the content of the input:

  • on empty input all options will be taken
  • otherwise options will be filtered against the search term
  • it will limit the display to 10 results in all cases

Model: {{ model2 | json }}

A typeahead example that uses a formatter function for string results

Model: {{ model3 | json }}

A typeahead example that gets values from the Wikipedia Search

  • remote data retrieval
  • debounceTime operator
  • do operator
  • distinctUntilChanged operator
  • switchMap operator
  • catch operator to display an error message in case of connectivity issue
searching...
Sorry, suggestions could not be loaded.

Model: {{ model4 | json }}

A typeahead example that uses custom template for results display and uses object as a model

{{ r.name }}

Model: {{ model5 | json }}

This typeahead shows a hint when the input matches because the default values have been customized.