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.