Dynamic dropdown list uib-typeahead in AngularJS

Question

I have a data management application that plays with some big tables.

We have implemented local storage solutions to make it smooth on slow connections, but we're facing an issue when trying to implement custom filtering on typeaheads

The typeahead works fine with the local array of values, however as the sorting is not very precise, users get frustrated because the obvious match sometimes shows the very last or just gets lost amongst 100s of other results

After going through the libraries I can't find an obvious way to tweak the sort method for the Angular implementation, so we decide to have the list being created dynamically with the users input, markup as:

<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">

And 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 works just fine

On the client side it prints out the values of the list in $scope.dynamicClinicalDisorders accessing all properties just fine, but it just won't load the list in to the typeahead dropdown.

My code is based on plunker from this question

I'm pretty sure there's just this one dumb thing I'm overlooking, but I've been at it for too long now and can't find it

Answer 1

The typeahead works fine with the local array of values, however as the sorting is not very precise, users get frustrated because the obvious match sometimes shows the very last or just gets lost amongst 100s of other results

That means the problem is with delay. You render 100-200 items, user at this time types new input and might happen you did 2 calls one after another. So user can get old results on new call.

I suggest you to make delay 300ms (standard delay for typing) and use $http config.timeout = cancelerEvent.promise to stop old call if new one is coming.

Hope it will help

---

[EDIT]

About delay 300 sec

var timeoutHandlerFilterRowWatcher;

 if (timeoutHandlerFilterRowWatcher !== undefined) {
    $timeout.cancel(timeoutHandlerFilterRowWatcher);
  }

timeoutHandlerFilterRowWatcher = $timeout(function () {
      // do your HTTP call
}, 300);