Autocomplete in Navbar

Hi,

I need to add an autocomplete component in a navbar (something like https://mdbootstrap.com/docs/angular/navigation/navbar/#heading) I wrote this code:

<mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark indigo justify-content-between">
    <mdb-navbar-brand>
        <a class="navbar-brand" href="">Navbar</a>
    </mdb-navbar-brand>
    <links>
        <form class="form-inline waves-light waves-light ml-auto" mdbWavesEffect>
        <div class="md-form my-0">
            <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="">
    <mdb-option *ngFor="let option of results | async" [value]="option">
      {{option}}
    </mdb-option>
  </mdb-auto-completer>
            <button mdbBtn color="success" outline="true" size="sm" class="my-0 waves-light" type="submit" mdbWavesEffect>Search</button>
        </div>
        </form>
    </links>
</mdb-navbar>

When I type something in input control, there are some visualizations problems. How can I fix it?

thanks Marco