Topic: Prevent text no results from showing on Input click
Expected behavior I have implemented the mdb-autocomplete and am facing one problem. After page load the first time the user clicks on the input bar the "textNoResults" message is displayed immediately even before the user has entered anything in the search bar. Is there a way to prevent this from happening.
My code is as follows:
<div id="homeSearch" class="input-group ml-auto">
<input
type="text"
class="completer-input form-control mdb-autocomplete mb-0"
aria-label="Find tests"
placeholder="Search by lesson or topic"
[ngModel]="searchTopic | async"
(ngModelChange)="searchTopic.next($event)"
[mdbAutoCompleter]="auto"
placement="top"
/>
<div class="input-group-append">
<div class="btn-group">
<button
type="button"
mdbBtn
color="default"
size="md"
class="z-depth-0"
mdbWavesEffect
(click)="getList()"
>
<mdb-icon fas icon="search"></mdb-icon>
Get List
</button>
</div>
</div>
<mdb-auto-completer
class="black-text"
#auto="mdbAutoCompleter"
textNoResults="Could not find matching results"
[disabled]="enableSearch"
>
<mdb-option
*ngFor="let option of results | async"
[value]="option"
>
{{ option }}
</mdb-option>
</mdb-auto-completer>
</div>
TS Code
ngOnInit() {
const self = this;
this.results = this.searchTopic
.pipe(debounceTime(1000), distinctUntilChanged())
.pipe(
map((value: string) => this.searchEntries(value))
);
}
searchEntries(term: string) {
const filterValue = term.toLowerCase();
let filteredResults = [];
this.allResults.filter((data: any) => {
if(data.toLowerCase().includes(filterValue))
filteredResults.push(data);
});
return filteredResults;
}
}
Arkadiusz Idzikowski staff answered 5 years ago
Please add startWith('')
to the second pipe in ngOnInit
, that should resolve your problem:
ngOnInit() {
this.results = this.searchTopic
.pipe(debounceTime(1000), distinctUntilChanged())
.pipe(
startWith(''),
map((value: string) => this.searchEntries(value))
);
}
anuragd7 commented 5 years ago
Thanks for the suggestion. Just tried it - however the no results message still shows up as soon as we focus on the input element.
Arkadiusz Idzikowski staff commented 5 years ago
Please provide full html and ts code so we can check if there are any other problems in this example.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Open
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 8.0.0
- Device: mac
- Browser: chrome
- OS: OSX
- Provided sample code: No
- Provided link: No