search results not showing on mdb-option of mdb-autocomplete


Topic: search results not showing on mdb-option of mdb-autocompleter in mdb-navbar

rachad malek 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.


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.


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));
    });

}


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