Autocomplete selected item


Topic: Autocomplete selected item

agenda pro premium 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


r.seifert 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.


Arkadiusz Idzikowski staff answered 2 years ago

@agenda This bug was fixed in v2.3.0, please upgrade your MDB5 Angular version.


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • User: Pro
  • 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