Topic: search results not showing on mdb-option of mdb-autocompleter in mdb-navbar
rachad malek free asked 4 years ago
hello, I hope you are all well. I open this ticket to report a problem relating to the mdb-autocompleter in the mdb-navbar. the results cannot be displayed in mdb-option. thank you very much.
rachad malek free answered 4 years ago
hello, thank you very much for your response and your responsiveness. the problem is solved. you just had to add the [appendToBody] = "true" parameter to the mdb-auto-complete. I add the code here for any useful purpose:
<form class="form-inline waves-light mr-3" [formGroup]="searchUserForm" mdbWavesEffect>
<div class="md-form my-0 white-text">
<mdb-icon fas icon="search mr-1" aria-hidden="true"></mdb-icon>
<input
type="text"
class="completer-input form-control mdb-autocomplete mb-0"
formControlName="userAutocomplete"
[mdbAutoCompleter]="auto"
placeholder="Search user..."
/>
<mdb-auto-completer #auto="mdbAutoCompleter" textNoResults="No results found!!!" [appendToBody]="true">
<mdb-option *ngFor="let option of results | async" [value]="getOption(option)" (click)="onClickOptionSearch(option)">
<div class="d-flex flex-column">
<strong>Name : {{option.title}} {{option.lastName}} {{option.firstName}}</strong>
<small>ID: {{ option.id }}</small>
</div>
</mdb-option>
</mdb-auto-completer>
</div>
</form>
Template Typescript :
ngOnInit() {
this.searchUserForm = new FormGroup({
userAutocomplete : new FormControl()
});
this.searchUserForm.controls.userAutocomplete.valueChanges
.subscribe((searchText) => {
this.results = this.userService.getSearchUser(searchText)
.pipe(debounceTime(250));
});
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 9.3.1
- Device: All
- Browser: Chrome
- OS: Ubuntu 20.04 + Windows 10 Pro
- Provided sample code: No
- Provided link: No
Arkadiusz Idzikowski staff commented 4 years ago
Please edit your post and add an example code on which we will be able to reproduce this problem.