Topic: Autocomplete selected item
agenda priority asked 2 years ago
Hi,I have problem with MDB Autocomplete component. I copied your Autocomplete code from demo and set "selected" output on mdb-autocomplete tag to call a function
**Expected behavior**
When clicked first time on item function should call only once. When clicked second time function should call also only once
**Actual behavior**
When clicked first time on item function calls only once. When clicked second time function calls twice. When click third time function calls three times. etc
<mdb-form-control style="width: 22rem">
<input
mdbInput
type="text"
id="searchText"
name="textSearch"
class="form-control"
[mdbAutocomplete]="autocompleteOccupation"
/>
<label mdbLabel class="form-label" for="autocomplete">Example label</label>
</mdb-form-control>
<mdb-autocomplete
#autocompleteOccupation="mdbAutocomplete"
[displayValue]="displayValue"
[listHeight]="290"
[optionHeight]="58"
(selected)="selectedItem($event)"
>
<mdb-option *ngFor="let option of results | async" [value]="option">
<div class="autocomplete-custom-item-title">{{ option.title }}</div>
{{ option.subtitle }}
</mdb-option>
</mdb-autocomplete>
>
searchText = new Subject<string>(); results!: Observable<any[]>; notFound = false; data: any[] = [
{ title: 'One', subtitle: 'One text', checked: false },
{ title: 'Two', subtitle: 'Two text', checked: false },
{ title: 'Three', subtitle: 'Three text', checked: false },
{ title: 'Four', subtitle: 'Four text', checked: false },
{ title: 'Five', subtitle: 'Five text', checked: false },
{ title: 'Six', subtitle: 'Six text', checked: false }, ];
showValue(event: any) {
console.log(event);
console.log(event.item.subtitle);
console.log(event.event.target.checked); }
constructor() {
this.results = this.searchText.pipe(
startWith(''),
map((value: string) => this.filter(value)),
tap((results: string[]) =>
results.length > 0 ? (this.notFound = false) : (this.notFound = true)
)
); }
filter(value: string): string[] {
const filterValue = value.toLowerCase();
return this.data.filter((item: any) =>
item.title.toLowerCase().includes(filterValue)
); }
displayValue(value: any): string {
return value ? value.title : ''; }
selectedItem(item: any) {
console.log('clicked');
console.log(item); }
Please helpBR
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: MDB5 2.2.0
- Device: PC
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: No
Rafał Seifert free commented 2 years ago
Hello @agenda, thank you for your post. There is a bug with "selected" event indeed. We will look for solution to fix it.