Autocomplete: this.mdbAutoCompleter.selectedItemChanged is n

Topic: Autocomplete: this.mdbAutoCompleter.selectedItemChanged is not a function

dimitribocquet pro asked 6 years ago

Hello,

I'm trying to use the autocomplete with a Reactive form inside a modal (loaded from entryComponents), I copy paste your code for that and I get this error when I open my modal :

this.mdbAutoCompleter.selectedItemChanged is not a function

Here is my code:

    <div class="md-form form-sm">
    <input type="text" class="completer-input form-control mdb-autocomplete mb-0" (keydown)="searchText = $event.target.value"
        formControlName="type"
        (input)="getFilteredData()" (ngModelChange)="onChange($event)"
        mdbAutoCompleter="auto"
        [placeholder]="placeholder">

    <mdb-auto-completer #auto="mdbAutoCompleter" #completer [textNoResults]="textNoResults" (select)="typeSelected($event)">
        <mdb-option *ngFor="let option of results | async" [value]="option">
            <div class="d-flex flex-column">
                <strong>Name: {{option.name}}</strong>
                <small>Type: {{option.type}}</small>
            </div>
        </mdb-option>
    </mdb-auto-completer>
</div>

export class SimpleAutocompleteComponent implements OnInit, AfterViewInit {
    ...
    @ViewChild('completer') completer: MdbAutoCompleterComponent;

    ngOnInit() {

    }

    ngAfterViewInit() {
        this.completer.selectedItemChanged().subscribe((data: any) => {
            console.log('completer selectedItemChanged', data);
        });
    }

    ...
}

Add comment

Damian Gemza staff answered 6 years ago

0 0 Best answer

Dear @dimitribocquet

I have created a dynamic modal and insert there a mdb-auto-completer code, and there's no such problem.

Could you please take a look at my code, and try to use it in your app, and then let me know if there's still errors or not?

.app.component.html:

<button mdbBtn color="primary" (click)="openModal()">Open modal</button>

.app.component.ts:

modalRef: MDBModalRef;

  constructor(private modalService: MDBModalService) {}

  openModal() {
    this.modalRef = this.modalService.show(ModalComponent)
  }

.modal.component.html:

<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
      <span aria-hidden="true">×</span>
    </button>
    <h4 class="modal-title w-100" id="myModalLabel">Modal title</h4>
  </div>
  <div class="modal-body">
    <div class="md-form">
      <input type="text" class="completer-input form-control mdb-autocomplete"
             [(ngModel)]="searchText"
             (input)="getFilteredData()" (ngModelChange)="onChange()"
             [mdbAutoCompleter]="auto"
             placeholder="Choose your color">
      <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>
  </div>
  <div class="modal-footer">
    <button type="button" mdbBtn color="secondary" class="waves-light" aria-label="Close" (click)="modalRef.hide()" mdbWavesEffect>Close</button>
    <button type="button" mdbBtn color="primary" class="relative waves-light" mdbWavesEffect>Save!</button>
  </div>
</div>

.modal.component.ts:

import {Component, ViewChild} from '@angular/core';
import {MDBModalRef} from "ng-uikit-pro-standard";
import {MdbAutoCompleterComponent} from "ng-uikit-pro-standard";
import {of} from "rxjs";

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.scss']
})
export class ModalComponent {

  @ViewChild(MdbAutoCompleterComponent) completer: MdbAutoCompleterComponent;
  searchText = '';
  results: any;
  data: any = ['red', 'green', 'blue', 'cyan', 'magenta', 'yellow', 'black'];

  constructor(public modalRef: MDBModalRef) {
    this.results = this.searchEntries(this.searchText);
  }

  getDataItems() {
    return this.data;
  }

  searchEntries(term: string) {
    return of(this.getDataItems().filter((data: any) => data.toString().toLowerCase().includes(term.toString().toLowerCase())));
  }

  getFilteredData() {
    this.results = this.searchEntries(this.searchText);
  }

  onChange() {
    this.getFilteredData();
  }

  ngAfterViewInit() {
    this.completer.selectedItemChanged().subscribe((data: any) => {
      this.searchText = data.text;
      this.getFilteredData();
      console.log('Selected item change', data);
    });
  }

}

Best Regards,

Damian

Add comment

dimitribocquet pro answered 6 years ago

0 0 Best answer

Hello @Damian Gemza,

Thank you for your help. My issue was caused by keydown event. I removed it and everything is working well !

Add comment