Topic: Autocompleter select and selected events not triggered
Expected behavior I need to capture the selected element from the autocomplete, however, when I select an item from the autcompleter the selected event is not triggered.
HTML Code
<div class="md-form">
<input
type="text"
class="completer-input form-control mdb-autocomplete"
[ngModel]="searchText | async"
(ngModelChange)="searchText.next($event)"
[ngModelOptions]="{standalone: true}"
[mdbAutoCompleter]="auto"
(select)="onCountrySelect($event)"
placeholder="Choose your country"
/>
<mdb-auto-completer #auto="mdbAutoCompleter" textNoResults="I have found no results :(">
<mdb-option *ngFor="let option of results | async" [value]="option">
{{ option }}
</mdb-option>
</mdb-auto-completer>
</div>
TS Code
searchText = new Subject();
results: Observable<string[]>;
countries: any[];
ngOnInit() {
this.results = this.searchText.pipe(
startWith(''),
map((value: string) => this.filter(value))
);
}
//to filter the names of the countries
filter(value: string): string[] {
const filterValue = value.toLowerCase();
const countryNames = this.countries.map(item => item.name);
const returnValue = countryNames.filter((item:any) => item.toLowerCase().includes(filterValue));
return returnValue;
}
//gets country selected
onCountrySelect(event){
console.log(event);
}
Bartosz Termena staff answered 5 years ago
Dear @anuragd7
select
EventEmitter
should be placed in MdbAutoCompleterComponent
Just change your code to this:
<div class="md-form">
<input
type="text"
class="completer-input form-control mdb-autocomplete"
[ngModel]="searchText | async"
(ngModelChange)="searchText.next($event)"
[ngModelOptions]="{standalone: true}"
[mdbAutoCompleter]="auto"
placeholder="Choose your country"
/>
<mdb-auto-completer
(select)="onCountrySelect($event)" <-------------------------------
#auto="mdbAutoCompleter"
textNoResults="I have found no results :(">
<mdb-option *ngFor="let option of results | async" [value]="option">
{{ option }}
</mdb-option>
</mdb-auto-completer>
</div>
Hope it helps!
Best Regards, Bartosz.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 8.3.0
- Device: mac
- Browser: chrome
- OS: OSX
- Provided sample code: No
- Provided link: No