Autocomplete Input

Overview

Use the autocomplete 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

autocomplete

Implementation

Begin by importing the AutoCompleteModule module into your application.

import { AutoCompleteModule } from 'primeng/autocomplete';

Then set the formControlName and bind suggestions to a list of all string values possible for the field. Set the inputStyleClass to rui-form-control. Optionally, you can bind dropdown to true if you want to show the dropdown arrow. Otherwise, just typing in the input will display the dropdown menu. Finally, bind completeMethod to your backing method to build out your filtered list.

<p-autoComplete formControlName="country" inputStyleClass="rui-form-control" [dropdown]="true" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" />

In the typescript, create an AutoCompleteCompleteEvent interface and add a property to hold the filtered list. Then create the method called during the completeMethod event and update the filtered list based on the input.

interface AutoCompleteCompleteEvent {
    originalEvent: Event;
    query: string;
}
...
public filteredCountries: any[] | undefined;
...
public filterCountry(event: AutoCompleteCompleteEvent) {
    let filtered: any[] = [];
    let query = event.query;

    for (let i = 0; i < (this.countryList as any[]).length; i++) {
        let country = (this.countryList as any[])[i];
        if (country.toLowerCase().indexOf(query.toLowerCase()) == 0) {
            filtered.push(country);
        }
    }

    this.filteredCountries = filtered;
}

Angular component development

Component reference

autocomplete

Implementation

Begin by importing the AutoCompleteModule module into your application.

import { AutoCompleteModule } from 'primeng/autocomplete';

Then set the formControlName and bind suggestions to a list of all string values possible for the field. Set the inputStyleClass to rui-form-control. Optionally, you can bind dropdown to true if you want to show the dropdown arrow. Otherwise, just typing in the input will display the dropdown menu. Finally, bind completeMethod to your backing method to build out your filtered list.

<p-autoComplete formControlName="country" inputStyleClass="rui-form-control" [dropdown]="true" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" />

In the typescript, create an AutoCompleteCompleteEvent interface and add a property to hold the filtered list. Then create the method called during the completeMethod event and update the filtered list based on the input.

interface AutoCompleteCompleteEvent {
    originalEvent: Event;
    query: string;
}
...
public filteredCountries: any[] | undefined;
...
public filterCountry(event: AutoCompleteCompleteEvent) {
    let filtered: any[] = [];
    let query = event.query;

    for (let i = 0; i < (this.countryList as any[]).length; i++) {
        let country = (this.countryList as any[])[i];
        if (country.toLowerCase().indexOf(query.toLowerCase()) == 0) {
            filtered.push(country);
        }
    }

    this.filteredCountries = filtered;
}

Design

Figma design

Adobe XD design