Topic: MDB Auto Completer , Remote data not working
Mohammadu Abubakar free asked 5 years ago
Expected behavior I expect to see a dropdown list of matched labels
Actual behavior I Keep getting , "I have found no results
Resources (screenshots, code snippets etc.)
staffSearchText = new Subject();
staffResults: Observable<any>;
//staff: any[] ;
staff: any = {
results: [
{id: '12345', label: 'Mustapha Abubakar', code: 'O'},
{id: '6789', label: 'Buhari Sani', code: 'DM'},
{id: '3214', label: 'Aliyu Abu', code: 'PM'},
{id: '78235', label: 'farida lawal', code: 'M'},
]
}
constructor(private memoService: MemoService) { }
ngOnInit() {
this.staffResults = this.staffSearchText
.pipe(
startWith(''),
map((value: string) => this.filter(value))
);
}
filter(value: string): string[] | undefined {
const filterValue = value.toLowerCase();
if (this.staff) {
console.log('see this' + this.staff['results']);
return this.staff['results'].filter((item: any) =>{console.log(item); return item.label.toLowerCase().includes(filterValue)});
}
}
html file
<div class="md-form">
<input
type="text"
class="completer-input form-control mdb-autocomplete"
[ngModel]="staffSearchText | async"
(ngModelChange)="staffSearchText.next($event)"
[mdbAutoCompleter]="auto"
placeholder="Memo From"
/>
<mdb-auto-completer #auto="mdbAutoCompleter" textNoResults="I have found no results :(" [clearButton]="true">
<mdb-option *ngFor="let option of staffResults | async" [value]="option.label">
{{option.label}}
</mdb-option>
</mdb-auto-completer>
</div>
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Opened
Specification of the issue
- ForumUser: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 8.3.1
- Device: HP
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No
Arkadiusz Idzikowski staff commented 5 years ago
We couldn't reproduce the problem on the example you provided. Does this problem occur in this example or only when data is async and loaded from the server?
Are there any errors in the console? Did you import
startWith
operator correctly? It should work as expected whenstartWith
operator is available.