Topic: Autocomplete selected item
                  
                  agenda
                  priority
                  asked 3 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 3 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.