Typeahead Input

Overview

Use the typeahead component to prompt the user for a text value, showing them possible matches in a dropdown menu while they type.

The user can quickly select an item from the menu rather than having to type out the whole word, which can be a real time saver.

Development

Web component development

Component reference

typeahead

Implementation

Begin by importing the TypeaheadModule module into your application.

import { TypeaheadModule } from 'ngx-bootstrap/typeahead';

Then bind typeahead to a list of all string values possible for the field. Set typeaheadOptionsLimit to the max number of items you want the typeahead to drop down as suggestions. You must wrap the input in a div with position:relative in order for the typeahead popup to line up with the input.

<div style="position:relative">

    <input id="Country" formControlName="country" type="text" class="rui-form-control" required
        autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
        [typeahead]="countryList" typeaheadOptionsLimit="12" />

</div>

Angular component development

Component reference

typeahead

Implementation

Begin by importing the TypeaheadModule module into your application.

import { TypeaheadModule } from 'ngx-bootstrap/typeahead';

Then bind typeahead to a list of all string values possible for the field. Set typeaheadOptionsLimit to the max number of items you want the typeahead to drop down as suggestions. You must wrap the input in a div with position:relative in order for the typeahead popup to line up with the input.

<div style="position:relative">

    <input id="Country" formControlName="country" type="text" class="rui-form-control" required
        autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
        [typeahead]="countryList" typeaheadOptionsLimit="12" />

</div>

Design

Figma design

Adobe XD design