Autocomplete with colored options


Topic: Autocomplete with colored options

mdb2 pro asked 9 months ago

How can I color coded options of Autocomplete, e.g. specify a color, bold or other HTML attributes for each option in the list ?

mdb2 pro commented 9 months ago

Also disable some options

mdb2 pro commented 9 months ago

Perhaps adding an icon to the option

Damian Gemza staff answered 9 months ago

Dear @mdb2

Just use our new mdb-auto-completer component. There's open to modify template which you can build in your way.

Here's the sample piece of code:


<div class="md-form">
      <input type="text" class="completer-input form-control mdb-autocomplete"
             (input)="getFilteredData()" (ngModelChange)="onChange()"
             placeholder="Choose your color">
      <mdb-auto-completer #auto="mdbAutoCompleter" textNoResults="I have found no results :(">
        <mdb-option *ngFor="let option of results | async" [value]="option" class="red-text">


 @ViewChild(MdbAutoCompleterComponent) completer: MdbAutoCompleterComponent;
  searchText = '';
  results: any;
  data: any = ['red', 'green', 'blue', 'cyan', 'magenta', 'yellow', 'black'];

  constructor() {
    this.results = this.searchEntries(this.searchText);

  getDataItems() {

  searchEntries(term: string) {
    return of(this.getDataItems().filter((data: any) => data.toString().toLowerCase().includes(term.toString().toLowerCase())));

  getFilteredData() {
    this.results = this.searchEntries(this.searchText);

  onChange() {

  ngAfterViewInit() {
    this.completer.selectedItemChanged().subscribe((data: any) => {
      this.searchText = data.text;

Best Regards


mdb2 pro answered 9 months ago

It looks like the class is for all the options and not option-specific, e.g. disabling selected options, coloring other with green, etc.

mdb2 pro commented 9 months ago

This comes to mind:

Damian Gemza staff answered 9 months ago

Dear @mdb2

There are few possible ways of creating such a feature (you have to code it on your hand).

1) You have to use the [ngClass] syntax combined with index from *ngFor to specify exact element which has to be styled differently,

2) After clicking or some another event on mdb-option adds to it some classes.

Best Regards,


mdb2 pro commented 9 months ago

Thanks, Before I start to implement it, do you have plans to do it yourself as you did for select ?

itay pro answered 6 months ago

Any news ? ............

Arkadiusz Idzikowski staff commented 6 months ago

We will consider implementing something similar to mdb-select. However, in this case you can add necessary classes to the options yourself as they are exposed to the user.

itay pro commented 6 months ago

Do you have a date ?

Arkadiusz Idzikowski staff answered 6 months ago

We decided not to add implementation of the mdb-options styles to the internal code of the component, because styling with ngClass gives more flexibility in this case.

Please insert min. 20 characters.


Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: Angular
  • MDB Version: 7.5.1
  • Device: NA
  • Browser: NA
  • OS: NA
  • Provided sample code: No
  • Provided link: No