Topic: Autocomplete in Navbar
bitjuice pro asked 5 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 5 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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: 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