1

Currently I want to use the primeng autocomplete multi select component: https://www.primefaces.org/primeng/#/autocomplete

What I need additionally is that every item which I want to select from as an autosuggestion should be colored differently.

E.g. If I have the options Paris (red), Munich (blue) the background should be shown in a different color.

lennykey
  • 1,195
  • 2
  • 12
  • 25

1 Answers1

1

Once you have assigned a colour for each of your countries, just use templating to apply it :

<p-autoComplete [(ngModel)]="country" [suggestions]="filteredCountriesSingle" (completeMethod)="filterCountrySingle($event)"
  field="name" [size]="30" placeholder="Countries" [minLength]="1">

  <ng-template let-country pTemplate="item">
    <div class="ui-helper-clearfix" [ngStyle]="{'background-color':country.backgroundColor}">
      {{country.name}}
    </div>
  </ng-template>

</p-autoComplete>

Check my Plunker where I defined a random colour for each country :

this.listOfCountries.forEach(function (item) {
  item.backgroundColor = "#"+((1<<24)*Math.random()|0).toString(16);
});
Antikhippe
  • 6,316
  • 2
  • 28
  • 43
  • Thank you very much @Antikhippe. This was the hint I needed – lennykey Feb 08 '18 at 15:55
  • Is this also possible for selected items, so they keep the same color after they were selected – lennykey Feb 08 '18 at 16:04
  • I found out that I can also give a color to the selected item after clicking on an item. Using `pTemplate="selectedItem` instead of `item` in a `` solved my second problem – lennykey Feb 14 '18 at 08:31