Topic: Autocomplete: this.mdbAutoCompleter.selectedItemChanged is not a function
dimitribocquet pro asked 5 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);
});
}
...
}
Damian Gemza staff answered 5 years ago
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
dimitribocquet pro answered 5 years ago
Hello @Damian Gemza,
Thank you for your help. My issue was caused by keydown event. I removed it and everything is working well !
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: 7.5.1
- Device: Mac
- Browser: Chrome
- OS: OSX
- Provided sample code: No
- Provided link: No