Autocomplete with colored options


Topic: Autocomplete with colored options

mdb2 pro asked 4 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 4 months ago

Also disable some options


mdb2 pro commented 4 months ago

Perhaps adding an icon to the option


Damian Gemza staff answered 4 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:

.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


mdb2 pro answered 4 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 4 months ago

This comes to mind:

https://mdbootstrap.com/docs/angular/forms/select/#disabled


Damian Gemza staff answered 4 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,

Damian


mdb2 pro commented 4 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 1 months ago

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


Arkadiusz Idzikowski staff commented 1 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 3 weeks ago

Do you have a date ?


Arkadiusz Idzikowski staff answered 2 weeks 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.
Status

Answered

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