Topic: Autocompleter select and selected events not triggered

anuragd7 free asked 4 years ago


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 4 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.


anuragd7 free commented 4 years ago

Thanks for pointing out the mistake!



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

  • ForumUser: 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