Angucomplete Alt：在获得服务器响应之前获取“未找到结果”答案

【问题标题】：Angucomplete Alt : Getting "No Results Found" before the server response is obtainedAngucomplete Alt：在获得服务器响应之前获取“未找到结果”
【发布时间】：2017-10-13 17:05:20
【问题描述】：

我试图在 3 个字符后发起请求，但是一旦键入 3 个字符，我就会收到 No records found 错误，之后我可以找到服务调用已完成，但自动完成中没有显示任何内容（只有错误消息在自动完成下拉菜单下）。我在这里缺少什么？

HTML 代码：

       <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 远程处理程序

  $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);
};

尝试了另一个版本：

 <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);

}

【问题讨论】：

你用genericAPIService打了什么REST端点
当errorPayload 处理程序未能重新抛出错误时，链中的下一个.then 块将执行。为了跳过后续的.then 块，重新抛出错误很重要。
@georgeawg：它根本没有进入错误处理程序。在服务调用结束之前执行 Angu 完整指令......因为没有找到记录......我猜是这样......
@bowofola: 端点正在提供数据.. 在点击 url 之后.. 或者应该以其他方式提供？
很难重现您所看到的问题。什么是angucomplete-alt？第三方库或您创建的指令？

标签： angularjs autocomplete

【解决方案1】：

第一个例子

在您的第一个示例中，您永远不会返回 promise

var promise = genericAPIService.doApiCall(url, appConstant.POST, ...

因此，API 的响应永远不会解决 $timeout
在 $timeout 回调结束时返回 promise

第二个例子

您似乎没有正确设置remote-url-data-field

这是我使用您的第二个示例 http://plnkr.co/edit/QsJFWh?p=preview 附带的一个 plunker，它工作正常，我稍微更改了 searchAPI 方法以显示最后一个 http 响应

当我错误配置 remote-url-data-field 时，做出了响应，但 angucomplete 显示“未找到结果”

查看 plunk 上的注释，并尝试按照适合您的方式对其进行配置如果您无法绑定正确的属性，请从您的 api 中提供一个响应示例，我们可以提出解决方案

使用 $timeout

您使用$timeout 添加延迟的原因并不明显，您在两个示例中都这样做了。这样做的唯一一件事就是增加给定时间的人为延迟。如果原因是在触发 API 请求的输入字段中添加一些去抖动/延迟，那将不会减少它。

有一个pause 属性可以配置以毫秒为单位的延迟，以确保在用户停止输入的这段时间之后调用 api。可以在 plunker demo 上看到，默认值为 500 由于您的自定义服务和 $http（来自第二个示例）都返回承诺，您可以直接返回它们的结果

【讨论】：

【解决方案2】：

我能够解决问题。PFB 帮助解决问题的链接。

Angucomplete-alt: Remote-API-handler not working as expected

【讨论】：

【解决方案3】：

根据我在您的代码和文档中看到的内容，我认为问题在于您会立即在您的 searchAPI 函数中从 $timeout 返回一个 Promise，一旦超时就会自行解决到达。这就是为什么您会看到返回“No Records Found”，然后调用您的 API。相反，直接返回您的 $http 承诺对象。即：

$scope.searchAPI = function(userInputString, timeoutPromise)
{
    // do some other stuff, stringify data, build url_endpoint
    return $http.post(url_endpoint, json_data, {timeout: timeoutPromise});
}

$http 承诺只有在您的 API 被使用后才会解析。

【讨论】：