Customize mdb-completer dropdown content

Topic: Customize mdb-completer dropdown content

nedzeplin pro asked 6 years ago

I have gotten mdb-completer working with a basic example, but I would like to customize the actual content of the dropdown elements (for example, searching on countries and adding an image of the country flag next to each country element in the dropdown). Is there a way to do this? If not, are there any other alternatives? Thanks, Ed

Add comment

Damian Gemza staff answered 6 years ago

0 0 Best answer

Dear nedzeplin,
You're able to add some countries icons with code below:

.html:
<div>
<pre><mdb-completer [label]="'Select color'" initialValue="Select color" name="autocomplete" [(ngModel)]="searchStr" [datasource]="dataService" [minSearchLength]="0">

</mdb-completer></pre>
</div>
<div></div>
<div>.ts:</div>
<div></div>
<div>
<div>
<pre>import { Component } from '@angular/core';

import { CompleterData } from 'ng-mdb-pro/pro/autocomplete';

import { CompleterService } from 'ng-mdb-pro/pro';

@Component({

selector:'app-root',

templateUrl:'./app.component.html',

styleUrls: ['./app.component.scss']

})

export class AppComponent {

public countries= [{

'name':'Afghanistan',

'code':'AF',

'flag':'./../assets/img/af.png'

}, {

'name':'Aland Islands',

'code':'AX',

'flag':''

}, {

'name':'Albania',

'code':'AL',

'flag':'./../assets/img/al.png'

}, {

'name':'Algeria',

'code':'DZ',

'flag':'./../assets/img/dz.png'

}];

protected searchStr: string;

protected dataService: CompleterData;

constructor(private completerService: CompleterService) {

this.dataService = completerService.local(this.countries, 'name', 'name').imageField('flag');

}

}</pre>
</div>
</div>
<div></div>
<div>And in src/assets directory put some images.</div>
<div>But there will be problem with styling those icons. You'll should style it on your hand.</div>
<div></div>
<div>In future we'll have plans to add be fully compatible with this functionality, but for now, you have to style it on your hand.</div>
<div>Best Regards,</div>
<div>Damian</div>

Please insert min. 20 characters.

Dear nedzeplin, You're able to add some countries icons with code below: .html:

<mdb-completer [label]="'Select color'" initialValue="Select color" name="autocomplete" [(ngModel)]="searchStr" [datasource]="dataService" [minSearchLength]="0">

</mdb-completer>

.ts:

import { Component } from '@angular/core';

import { CompleterData } from 'ng-mdb-pro/pro/autocomplete';

import { CompleterService } from 'ng-mdb-pro/pro';

@Component({

selector:'app-root',

templateUrl:'./app.component.html',

styleUrls: ['./app.component.scss']

})

export class AppComponent {

public countries= [{

'name':'Afghanistan',

'code':'AF',

'flag':'./../assets/img/af.png'

}, {

'name':'Aland Islands',

'code':'AX',

'flag':''

}, {

'name':'Albania',

'code':'AL',

'flag':'./../assets/img/al.png'

}, {

'name':'Algeria',

'code':'DZ',

'flag':'./../assets/img/dz.png'

}];

protected searchStr: string;

protected dataService: CompleterData;

constructor(private completerService: CompleterService) {

this.dataService = completerService.local(this.countries, 'name', 'name').imageField('flag');

}

}

And in src/assets directory put some images.

But there will be problem with styling those icons. You'll should style it on your hand.

In future we'll have plans to add be fully compatible with this functionality, but for now, you have to style it on your hand.

Best Regards,

Damian

nedzeplin pro commented 6 years ago

Thanks Damian. Can that imageField also be an image that is hosted from a URL?

Damian Gemza staff commented 6 years ago

I don't think so. If you want to get some datas from remote server, you have to use .remote() method instead of local(), but feel free to test and let me know!

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

nedzeplin

Pro User 10Support score
4Questions 2Answers 0Snippets