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

rachad malek free asked 3 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 3 years ago

Please edit your post and add an example code on which we will be able to reproduce this problem.


rachad malek free answered 3 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));
    });

}



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

  • 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