Autocomplete in Navbar


Topic: Autocomplete in Navbar

bitjuice pro asked 6 years ago

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


Damian Gemza staff answered 6 years ago

Dear bitjuice,

If you're talking about those font colors, please use the code below:

.html:

<!--<form class="form-inline waves-light waves-light ml-auto" mdbWavesEffect>-->
  <div class="md-form my-0">
    <input type="text" class="text-white 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>-->

.scss:

.mdb-autocomplete-clear {
  color: white;
}
.form-control::placeholder {
  color: white;
}

Best Regards, Damian


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.0.0
  • Device: PC
  • Browser: Chorme
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes