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
Answers 1
First Example
In your first example you never return the promise
var promise = genericAPIService.doApiCall(url, appConstant.POST, ... So the $timeout is never resolved with the response from the API
Return the promise at the end of the $timeout callback
Second Example
It looks like that you are not settings correctly the remote-url-data-field
Here's a plunker that I came with using your second example http://plnkr.co/edit/QsJFWh?p=preview and it works correctly, I have slightly altered the searchAPI method to show the last http response
When I misconfigured the remote-url-data-field, the response was made but the angucomplete read "No results found"
See the notes on the plunk, and try to configure it the way it works for you If you can't bind the correct property, provide a response sample from your api, and we can come up with a solution
Using $timeout
The reason you are using $timeout to add a delay is not obvious, you do it in both examples. The only thing this does is to add an artificial delay of the given amount of time. If the reason is to add some debounce/delay to the input field triggering an API request, that won't cut it.
There is a pause property that can be configured with a delay in milliseconds that will ensure that the api will be called after this amount of time when the user has stopped typing. You can see it on the plunker demo, the default value is 500 Since your custom service and $http (from the 2nd example) both return promises, you can directly return their result
Answers 2
I was able to solve the issue.PFB the link which helped in solving it.
Angucomplete-alt: Remote-API-handler not working as expected
Answers 3
Based on what I see in your code, and in the documentation, I think the problem is that you're immediately returning a Promise from $timeout in your searchAPI function, which resolves itself as soon as the timeout is reached. This is why you'll see the "No Records Found" returned, and THEN your API is called. Instead, return your $http promise object directly. i.e.:
$scope.searchAPI = function(userInputString, timeoutPromise) { // do some other stuff, stringify data, build url_endpoint return $http.post(url_endpoint, json_data, {timeout: timeoutPromise}); } The $http promise will only resolve after your API has been consumed.
0 comments:
Post a Comment