Typeahead

A text input that suggests values while the user types. The user can pick a suggestion or keep their own text.

Bootstrap’s typeahead docs describe the markup and CSS.

Example

Add bsTypeahead to a text input and give it a search function that returns the suggestions for a term. The input stays a native input, so bind it with [formControl], [(ngModel)] or [formField]. It follows the ARIA combobox pattern: ↓ and ↑ move through the suggestions, Enter picks one and Escape closes the list. Screen readers hear how many suggestions there are.

<div bsFormField>
  <label bsFormLabel>Country</label>
  <input bsFormControl [bsTypeahead]="search" [formControl]="country" />
  <small bsFormText>Type to see suggestions, or enter any country.</small>
</div>
<p class="mt-3 mb-0">Value: {{ country.value || 'none' }}</p>

Async search and custom items

The search can return a promise or an observable, so it can call a server. Only the answer to the latest term is shown, and debounce (200 ms by default) waits for the user to pause. For objects, formatter turns a suggestion into text, and itemTemplate renders each one. itemSelect emits the picked suggestion.

<div bsFormField>
  <label bsFormLabel>Framework</label>
  <input
    bsFormControl
    [bsTypeahead]="search"
    [formatter]="name"
    [itemTemplate]="item"
    (itemSelect)="picked.set($event)" />
</div>
<p class="mt-3 mb-0">Picked: {{ picked()?.name ?? 'none' }}</p>

<ng-template #item let-framework let-text="text">
  <span class="menu-item-content">
    <span>{{ text }}</span>
    <small class="menu-item-description">{{ framework.language }}</small>
  </span>
</ng-template>