Managing a data application with large tables can be challenging.
We have tried local storage solutions to improve performance on slow connections, but we are encountering difficulties when attempting to implement custom filtering for typeaheads.
Even though the typeahead functions properly with local values, the sorting is not always accurate. This leads to frustration as users may struggle to find the correct match among hundreds of results.
After exploring various libraries, I have been unable to find a straightforward way to adjust the sorting method in Angular implementation. As a solution, we decided to dynamically generate the list based on user input using the following markup:
<input type="text" class="form-control"
placeholder="Search"
ng-model="oi.clinicalDisorder"
typeahead-wait-ms="1000"
uib-typeahead="clinicalDisorder as clinicalDisorder.clinicalDisorderName for clinicalDisorder in startsWith($viewValue) | limitTo:200"
typeahead-editable="false">
In my controller:
$scope.startsWith = function(viewValue) {
if (viewValue.length>3){
return $http({
method: 'GET',
url: 'api/_search/clinical-disorders/'+viewValue})
.then(function successCallback(response) {
$scope.dynamicClinicalDisorders = response.data;
return $scope.dynamicClinicalDisorders;
},
function errorCallback(response) {
console.log(response);
});
}
};
The backend query is functioning correctly.
While the client-side code successfully accesses and prints the values from $scope.dynamicClinicalDisorders, it fails to load the list into the typeahead dropdown.
The foundation of my code can be found in the plunker shared in response to this question.
I am confident that there is a simple oversight causing this issue, but after spending considerable time on it, I seem to be missing it.