How to use ImageField and descriptionField in ng2-completor in angular 4+?

Question

I am developing project in angular 6 and I am using ng2-completor in my search Box. I have used completerService.local that contains list of string.

<div><ng2-completer [datasource]="countryLists" id="global_search"
    [openOnFocus]="true"
    [minSearchLength]="1" [clearSelected]="true"
    [clearUnselected]="true" [openOnFocus]='false' (click)="onFocus()"
    placeholder="{{ 'Search '}}"
    [fillHighlighted]="false" (selected)="searchMyCountry($event)"></ng2-completer>
</div>

Now, I want to add an image and description like they have given in their demo link

Demo Link

But I am unable to find how to use this.

How do I do this?

Answer 1

In the example given you can check that completerService is chained with local and then imageField function.

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

Link to example in GitHub

Answer 2

Hello use below example:HTML

<form class="example-form">
<mat-form-field class="example-full-width">
<input matInput placeholder="State" aria-label="State" [matAutocomplete]="auto" [formControl]="stateCtrl">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let state of filteredStates | async" [value]="state.name">
<img style="vertical-align:middle;" aria-hidden src="{{state.flag}}" height="25" />
<span>{{ state.name }}</span> |
<small>Population: {{state.population}}</small>
</mat-option>
</mat-autocomplete>
</mat-form-field>
<br />
<mat-slide-toggle
[checked]="stateCtrl.disabled"
(change)="stateCtrl.disabled ? stateCtrl.enable() : stateCtrl.disable()">
Disable Input?
</mat-slide-toggle>
</form>

And TS

import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';
import {Observable} from 'rxjs';
import {map, startWith} from 'rxjs/operators';
export class State {
constructor(public name: string, public population: string, public flag: string) { }
}
/**
* @title Autocomplete overview
*/
@Component({
selector: 'autocomplete-overview-example',
templateUrl: 'autocomplete-overview-example.html',
styleUrls: ['autocomplete-overview-example.css']
})
export class AutocompleteOverviewExample {
stateCtrl: FormControl;
filteredStates: Observable<any[]>;
states: State[] = [
{
name: 'Arkansas',
population: '2.978M',
// https://commons.wikimedia.org/wiki/File:Flag_of_Arkansas.svg
flag: 'https://upload.wikimedia.org/wikipedia/commons/9/9d/Flag_of_Arkansas.svg'
},
{
name: 'California',
population: '39.14M',
// https://commons.wikimedia.org/wiki/File:Flag_of_California.svg
flag: 'https://upload.wikimedia.org/wikipedia/commons/0/01/Flag_of_California.svg'
},
{
name: 'Florida',
population: '20.27M',
// https://commons.wikimedia.org/wiki/File:Flag_of_Florida.svg
flag: 'https://upload.wikimedia.org/wikipedia/commons/f/f7/Flag_of_Florida.svg'
},
{
name: 'Texas',
population: '27.47M',
// https://commons.wikimedia.org/wiki/File:Flag_of_Texas.svg
flag: 'https://upload.wikimedia.org/wikipedia/commons/f/f7/Flag_of_Texas.svg'
}
];
constructor() {
this.stateCtrl = new FormControl();
this.filteredStates = this.stateCtrl.valueChanges
.pipe(
startWith(''),
map(state => state ? this.filterStates(state) : this.states.slice())
);
}
filterStates(name: string) {
return this.states.filter(state =>
state.name.toLowerCase().indexOf(name.toLowerCase()) === 0);
}
}