Hi, We're currently using version 12.4.2 (.net, Angular) and created (and also recreated/updated) a couple of entites according to the current output from Power Tools (version 4.2.0).
It has the feature where the user gets almost instant search results while typing into the search field, almost known as state of the art today of course. It's realized like this with ngModelChange in the html part:
<div class="input-group mb-3">
<input
[(ngModel)]="filterText"
(ngModelChange)="getETests()"
name="filterText"
autoFocus
type="text"
class="form-control"
[placeholder]="l('SearchWithThreeDot')"
/>
<button class="btn btn-primary" type="submit" (click)="getETests()">
<i class="flaticon-search-1"></i>
</button>
</div>
...and like this in the corresponding ts part:
getETests(event?: LazyLoadEvent) {
if (this.primengTableHelper.shouldResetPaging(event)) {
this.paginator.changePage(0);
if (this.primengTableHelper.records && this.primengTableHelper.records.length > 0) {
return;
}
}
this.primengTableHelper.showLoadingIndicator();
this._eTestsServiceProxy
.getAll(
this.filterText,
this.titleFilter,
this.primengTableHelper.getSorting(this.dataTable),
this.primengTableHelper.getSkipCount(this.paginator, event),
this.primengTableHelper.getMaxResultCount(this.paginator, event),
)
.subscribe((result) => {
this.primengTableHelper.totalRecordsCount = result.totalCount;
this.primengTableHelper.records = result.items;
this.primengTableHelper.hideLoadingIndicator();
});
}
This causes two kinds of issues with entites having a couple more properties and especially thousands of records:
- Every single character typed in by the user fires a call to the AppService instantly, there is no debouncing at all (ok, this is good for user experience, just creating much more load)
- The really problematic is that the subscribed results may arrive in different order than the calls were sent (as different search inputs may take more or less time to be answered from the database)
How can we fix that, especially the latter? It's really a problem when a user e.g. types "backend" into the search field, but ends up with results for "back pain", too, because the result for "back" came in last for whatever reason...
Thanks!
6 Answer(s)
-
0
Any news on this please..? We need to fix this soon for our customers. Thanks again!
-
0
Hi,
Could you try using
updateOnoption as explained here https://angular.io/api/forms/NgModel#properties.Please also take a look at https://stackoverflow.com/questions/41308826/angular-2-debounce-ngmodelchange
-
0
Hello @ismcagdas, Thank you for your response. Unfortunately, "updateOn" is not a feasible solution for us, as it only triggers updates when the focus is lost from the input field or when the form is submitted. This approach does not meet our requirement for "real-time" search results. A more viable solution appears to be using a directive that handles debouncing, as mentioned in your StackOverflow post.
It would be beneficial if your framework could natively support this functionality, as the current implementation is inadequate for production use.
-
0
Hello @ismcagdas, How can we resolve this now? I think it's something that should be fixed properly in the next Zero version, as the current entities created by Power Tools are clearly buggy. I see the following issues:
- The current filtering implementation can lead to wrong results (especially on large databases where filter operations have varying durations)
- Each additional character launches an additional call on GetAll without cancelling previous one(s) that still might be running (easily leads to performance issues)
- Spinner is hiding the filterText input, but user can still continue to type into it
- Audit log gets spammed with GetAll entries
I think this calls for implementing task cancellation in the backend and some UI optimization to make look and feel consistent?
-
0
Hi,
Could you create an issue on https://github.com/aspnetzero/aspnet-zero-core so we can work on this ?
-
0
Hello,
See: https://github.com/aspnetzero/aspnet-zero-core/issues/5194
We hope for a quick solution to the problem :)
