In my current project, I am utilizing an Angular material autocomplete feature that fetches data via AJAX. I am facing a dilemma trying to determine the most efficient approach. Below is a snippet of my code:
$scope.loadOrganizations = function () {
var url = "index.php?option=com_crm&task=inquiry.loadOrganizations";
send_data = JSON.stringify({"query": $scope.searchText});
$http({
method: "POST",
url: url,
dataType: "JSON",
data: send_data,
beforeSend: function (xhr) {
xhr.setRequestHeader('Content-Type', 'application/json;charset=utf-8');
xhr.setRequestHeader('Accept', 'application/json');
}
}).then(function Success(response) {
$scope.errors = [];
if (response.data.state) {
$scope.organizations = response.data.results;
} else {
$scope.errors.push({
index: $scope.errors.length,
error_description: "Something Went Wrong With Loading Existing Data. Please Try Again Later"
});
}
}, function Error(response) {
console.log(response);
});
};
$scope.querySearch = function (query) {
$scope.loadOrganizations();
var results = $scope.organizations;
return results;
};
The issue at hand is the delay in data retrieval when a user inputs a query for the autocomplete feature. The search functionality queries the server and returns data based on a like query which leads to sluggish performance, taking around 250ms to load data. This lag in autocomplete loading time is not ideal for user experience. I am seeking advice on how to optimize this process to enhance efficiency and responsiveness without making users wait for data.