AutoComplete AutoComplete is an input component that provides real-time suggestions when being typed.

Basic

Country: {{country ? country.name||country : 'none'}}

Advanced

Brand: {{brand||'none'}}

Multiple

Import


import {AutoCompleteModule} from 'primeng/primeng';

Getting Started

AutoComplete uses ngModel for two-way binding, requires a list of suggestions and a completeMethod to query for the results. The completeMethod gets the query text as event.query property and should update the suggestions with the search results.


<p-autoComplete [(ngModel)]="text" [suggestions]="results" (completeMethod)="search($event)"></p-autoComplete>


export class AutoCompleteDemo {
    
    text: string;
    
    results: string[];
    
    search(event) {
        this.mylookupservice.getResults(event.query).then(data => {
            this.results = data;
        });
    }
    
}

Model Driven Forms

AutoComplete can be used in a model driven form as well.


<p-autoComplete formControlName="city" [suggestions]="results" (completeMethod)="search($event)"></p-autoComplete>

Dropdown

Enabling dropdown property displays a button next to the input field, implementation by default does nothing and you can use the dropdown for cases like displaying all results. onDropdownClick is triggered when the button is clicked.


<p-autoComplete [(ngModel)]="text" [suggestions]="results" (completeMethod)="search($event)" 
            [dropdown]="true" (onDropdownClick)="handleDropdown(event)"></p-autoComplete>


export class AutoCompleteDemo {
    
    text: string;
    
    results: string[];
    
    search(event) {
        this.mylookupservice.getResults(event.query).then(data => {
            this.results = data;
        });
    }
    
    handleDropdown(event) {
        //event.query = current value in input field
    }
    
}

Multiple Selection

Multiple mode is used to select more than one value from the autocomplete. In this case, model reference should be an array.


<p-autoComplete [(ngModel)]="texts" [suggestions]="results" (completeMethod)="search($event)" [multiple]="true"></p-autoComplete>


export class AutoCompleteDemo {
    
    texts: string[];
    
    results: string[];
    
    search(event) {
        this.mylookupservice.getResults(event.query).then(data => {
            this.results = data;
        });
    }
    
}

Objects

AutoComplete can also work with objects using the field property that defines the label to display as a suggestion. The value passed to the model would still be the object instance of a suggestion. Here is an example with a Country object that has name and code fields such as {name:"United States",code:"USA"}.


<p-autoComplete [(ngModel)]="val" [suggestions]="results" (completeMethod)="search($event)" field="name"></p-autoComplete>


export class AutoCompleteDemo {
    
    val: country;
    
    results: country[];
    
    search(event) {
        this.countrylookupservice.getResults(event.query).then(data => {
            this.results = data;
        });
    }
    
}

Templating

Templating allows displaying custom content inside the suggestions panel. The local template variable passed to the template is an object in the suggestions array.


<p-autoComplete [(ngModel)]="brand" [suggestions]="filteredBrands" (completeMethod)="filterBrands($event)">
    <template let-brand>
        <div class="ui-helper-clearfix" style="border-bottom:1px solid #D5D5D5">
            <img src="showcase/resources/demo/images/car/{{brand}}.gif" style="width:32px;display:inline-block;margin:5px 0 2px 5px"/>
            <div style="font-size:18px;float:right;margin:10px 10px 0 0">{{brand}}</div>
        </div>
    </template>
</p-autoComplete>

Attributes

Name Type Default Description
suggestions array null An array of suggestions to display.
field any null Field of a suggested object to resolve and display.
scrollHeight string 200px Maximum height of the suggestions panel.
dropdown boolean false Displays a button next to the input field when enabled.
multiple boolean false Specifies if multiple values can be selected.
minLength number 3 Minimum number of characters to initiate a search.
delay number 300 Delay between keystrokes to wait before sending a query.
style string null Inline style of the component.
styleClass string null Style class of the component.
inputStyle string null Inline style of the input field.
inputStyleClass string null Inline style of the input field.
placeholder string null Hint text for the input field.
readonly boolean false When present, it specifies that the input cannot be typed.
disabled boolean false When present, it specifies that the component should be disabled.
maxlength number null Maximum number of character allows in the input field.
size number null Size of the input field.

Events

Name Parameters Description
completeMethod event.originalEvent: browser event
event.query: Value to search with
Callback to invoke to search for suggestions.
onSelect value: Selected value Callback to invoke when a suggestion is selected.
onUnselect value: Unselected value in multiple mode Callback to invoke when a selected value is removed.
onDropdownClick event.originalEvent: browser event
event.query: Current value of the input field
Callback to invoke to when dropdown button is clicked.

Styling

Following is the list of structural style classes, for theming classes visit theming page.

Name Element
ui-autocomplete Container element
ui-autocomplete-panel Overlay panel of suggestions.
ui-autocomplete-items List container of suggestions.
ui-autocomplete-item List item of a suggestion.
ui-autocomplete-token Element of a selected item in multiple mode.
ui-autocomplete-token-icon Close icon element of a selected item in multiple mode.
ui-autocomplete-token-label Label of a selected item in multiple mode.

Dependencies

Native component that requires the css of PrimeUI Autocomplete.


<h3 class="first">Basic</h3>
<p-autoComplete [(ngModel)]="country" [suggestions]="filteredCountriesSingle" (completeMethod)="filterCountrySingle($event)" field="name" [size]="30"
    placeholder="Countries" [minLength]="1"></p-autoComplete>
<span style="margin-left:10px">Country: {{country ? country.name||country : 'none'}}</span>

<h3>Advanced</h3>
<p-autoComplete [(ngModel)]="brand" [suggestions]="filteredBrands" (completeMethod)="filterBrands($event)" [size]="30"
    [minLength]="1" placeholder="Hint: type 'v' or 'f'" [dropdown]="true" (onDropdownClick)="handleDropdownClick($event)">
    <template let-brand>
        <div class="ui-helper-clearfix" style="border-bottom:1px solid #D5D5D5">
            <img src="showcase/resources/demo/images/car/{{brand}}.gif" style="width:32px;display:inline-block;margin:5px 0 2px 5px"/>
            <div style="font-size:18px;float:right;margin:10px 10px 0 0">{{brand}}</div>
        </div>
    </template>
</p-autoComplete>
<span style="margin-left:50px">Brand: {{brand||'none'}}</span>

<h3>Multiple</h3>
<p-autoComplete [(ngModel)]="countries" [suggestions]="filteredCountriesMultiple" (completeMethod)="filterCountryMultiple($event)" styleClass="wid100"
    [minLength]="1" placeholder="Countries" field="name" [multiple]="true">
</p-autoComplete>
<ul>
    <li *ngFor="let c of countries">{{c.name}}</li>
</ul>


export class AutoCompleteDemo {

    country: any;
    
    countries: any[];
        
    filteredCountriesSingle: any[];
    
    filteredCountriesMultiple: any[];
    
    brands: string[] = ['Audi','BMW','Fiat','Ford','Honda','Jaguar','Mercedes','Renault','Volvo','VW'];
    
    filteredBrands: any[];
    
    brand: string;
    
    constructor(private countryService: CountryService) { }
    
    filterCountrySingle(event) {
        let query = event.query;        
        this.countryService.getCountries().then(countries => {
            this.filteredCountriesSingle = this.filterCountry(query, countries);
        });
    }
    
    filterCountryMultiple(event) {
        let query = event.query;
        this.countryService.getCountries().then(countries => {
            this.filteredCountriesMultiple = this.filterCountry(query, countries);
        });
    }
    
    filterCountry(query, countries: any[]):any[] {
        //in a real application, make a request to a remote url with the query and return filtered results, for demo we filter at client side
        let filtered : any[] = [];
        for(let i = 0; i < countries.length; i++) {
            let country = countries[i];
            if(country.name.toLowerCase().indexOf(query.toLowerCase()) == 0) {
                filtered.push(country);
            }
        }
        return filtered;
    }
        
    filterBrands(event) {
        this.filteredBrands = [];
        for(let i = 0; i < this.brands.length; i++) {
            let brand = this.brands[i];
            if(brand.toLowerCase().indexOf(event.query.toLowerCase()) == 0) {
                this.filteredBrands.push(brand);
            }
        }
    }
    
    handleDropdownClick() {
        this.filteredBrands = [];
        
        //mimic remote call
        setTimeout(() => {
            this.filteredBrands = this.brands;
        }, 100)
    }
}


@Injectable()
export class CountryService {
    
    constructor(private http: Http) {}

    getCountries() {
        return this.http.get('showcase/resources/data/countries.json')
                    .toPromise()
                    .then(res => <any[]> res.json().data)
                    .then(data => { return data; });
    }
}