Autocomplete with colored options

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:

.html:

<div class="md-form">
      <input type="text" class="completer-input form-control mdb-autocomplete"
             [(ngModel)]="searchText"
             (input)="getFilteredData()" (ngModelChange)="onChange()"
             [mdbAutoCompleter]="auto"
             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">
          {{option}}
        </mdb-option>
      </mdb-auto-completer>
    </div>

.ts:

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

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

  getDataItems() {
    return this.data;
  }

  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() {
    this.getFilteredData();
  }

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

Best Regards

Damian

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

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,

Damian

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

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.