How to keep displayed result before new search result display - angularjs

Question

Due to low query result, in my AngularJS application, when I click a search button to request a new search, my page will display my pre-define error message "No related search result as you want", after one/two seconds, my query finish, my page refresh to display my new search result.
I want to keep my displayed result before new search result display?
Any suggestion or hint to do that? Thanks.

Answer 1

This comes down to where you put the code to clear or replace the list of results.
It seems like you currently do something like this in your controller:
runSearch(searchText) {
this.results = []; // this shows your "no results" text
this.$http.get('/search?q=' + searchText).then(res => this.results = res.data);
}
Instead, just remove the first line so you only ever replace the results once the HTTP call returns:
runSearch(searchText) {
this.$http.get('/search?q=' + searchText).then(res => this.results = res.data);
}
Explanation
There are two points inside runSearch where Angular will update the page for you:
After the function is run, but before the HTTP call returns
After the HTTP call returns
Here they are in the code:
runSearch(searchText) {
// #1 - any code here will update the page immediately
this.$http.get('/search?q=' + searchText)
.then(function (res) {
// #2 - any code here will update the page when the HTTP call returns
});
// (#1 - if you have any code here it will also update the page immediately)
}
The technical reason for this is that Angular calls your runSearch() function inside a $scope.$apply() call, which calls your function and then runs a full digest of all the scopes in the application. That's what allows Angular to see the change and update the page. However, the function you pass to .then() on the $http promise executes some time later, after the initial digest completes. But Angular will also call this other function (the one passed to .then()) inside $scope.$apply(), which triggers another digest and allows Angular to see and apply any changes to the page at that time.
If you think about what you wanted to achieve, you only wanted to update the page after the search results are returned (#2 in the code above). So by only putting your code there, you got the page to update at the correct time, not before.