Angucomplete Alt : Getting "No Results Found" before the server response is obtained

Viewed 1387

I am trying to initiate a request after 3 characters but once 3 characters are typed I am getting the No records found error and after that I can find the service call get completed but nothing is shown in auto complete(only the error message under the autocomplete dropdown).What am I missing here?

HTML code:

       <angucomplete-alt id="angu_{{$index}}"
                                      placeholder="Search people"
                                      remote-api-handler="search"
                                      remote-url-data-field="results"
                                      title-field="fullName"
                                      minlength="3"
                                      input-class="form-control form-control-small"
                                      selected-object="selected"
                                      selected-object-data="$index"
                                      clear-selected="true"/>

Api remote handler

  $scope.search = function(str, timeoutPromise) {
   return $timeout(function () {
    $scope.input = {};
     $scope.input.userId = "";
     $scope.input.name = str;
     $scope.input.system = "";
     $scope.input.officeNumber = "";
     $scope.input.department= "";
     //  server call and get the response to $scope.organisationNames 
        var promise = genericAPIService.doApiCall(url, appConstant.POST,  
    JSON.stringify($scope.input));
            promise.then(
              function(payload) { 
                  console.log(payload);
                 $scope.organisationNames = payload.data.result.data.List;
                 $scope.results = [];
                 $scope.organisationNames.forEach(function(organisation) {
                        if ((organisation.fullName.toLowerCase().indexOf(str.toString().toLowerCase()) >= 0)) {
                            $scope.results.push(organisation);
                        }
                    });
                 return scope.results;
              },
              function(errorPayload) {
                  $log.error('failure loading role json', errorPayload);
              }).finally(function(){ 
                    $scope.loading = false;
                });  
}
},5000);
};

Tried another version of the same:

 <angucomplete-alt id="angu_{{$index}}" 
                   placeholder="Search people" 
                   selected-object="selectedBusiness" 
                   selected-object-data="$index"  
                   clear-selected="true" 
                   input-class="form-control 
                   form-control-small" 
                   remote-api-handler="searchAPI" 
                   remote-url-data-field="responseData.data" 
                   title-field="fullName" minlength="3" />

   $scope.searchAPI = function (userInputString, timeoutPromise) {
   $scope.approversAndEndorsersInput = {};
   return $timeout(function () {
         $scope.approversAndEndorsersInput.userId = "";
         $scope.approversAndEndorsersInput.name = userInputString;
         $scope.approversAndEndorsersInput.system = "";
         $scope.approversAndEndorsersInput.officeNumber = "";
         $scope.approversAndEndorsersInput.department= "";
         return $http.post(appConstant.selfDomainName+appConstant.getApproversAndEndorsersList, JSON.stringify($scope.approversAndEndorsersInput), {timeout: timeoutPromise});


   }, 1000);

}

3 Answers
Related