PrimeNg AutoComplete Suggestions are not loading

Question

I am trying to implement PrimeNg AutoComplete control in my project.

I am referring this PrimeNg

These are the steps I have followed.

1. Added Module.

import { AutoCompleteModule } from 'primeng/autocomplete';

2. Imported Module

 imports: [CommonModule, FormsModule, AutoCompleteModule],

3. Created Array of String.

  brands: string[] = ['Audi', 'BMW', 'Fiat', 'Ford', 'Honda', 'Jaguar', 'Mercedes', 'Renault', 'Volvo', 'VW'];

4. Added p-template

    <p-autoComplete [(ngModel)]="brand" [suggestions]="this.brands" (completeMethod)="search($event)" [size]="30 [minlength]="1" placeholder="Tags"></p-autoComplete>

On running project View is loaded but when I start typing in textbox, suggestions are not loading though loading gif is visible.

There is no error at console.

I have looked over all blogs and documentation before asking this but didnt find any solution.

Is there anything I am missing!

Any help is highly appreciated.

Answer 1

For future references,

Initially I thought (completeMethod) property wont have any effect if I return suggestion array as it is. But what is needed is that Suggestion array must change in fact must have a new reference every time we enter text in textbox.

Below is the snapshot from documentation.

https://www.primefaces.org/primeng/#/autocomplete

Change Detection

AutoComplete either uses setter based checking or ngDoCheck to realize if the suggestions has changed to update the UI. This is configured using the immutable property, when enabled (default) setter based detection is utilized so your changes such as adding or removing a record should always create a new array reference instead of manipulating an existing array as Angular does not trigger setters if the reference does not change. For example, use slice instead of splice when removing an item or use spread operator instead of push method when adding an item. On the other hand, setting immutable property to false removes this restriction by using ngDoCheck with IterableDiffers to listen changes without the need to create a new reference of data. Setter based method is faster however both methods can be used depending on your preference.