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

Question

我试图在 3 个字符后发起请求，但是一旦输入 3 个字符，我就会收到“未找到记录”错误，之后我可以找到服务调用已完成但自动完成中没有显示任何内容(仅显示错误消息在自动完成下拉菜单下)。我在这里错过了什么？

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

Answer 1

第一个例子

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

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

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

第二个例子

看来您没有正确设置 remote-url-data-field

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

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

查看 plunk 上的注释，并尝试按照适合您的方式配置它 如果您无法绑定(bind)正确的属性，请提供来自您的 api 的响应示例，我们可以提出解决方案

使用 $timeout

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

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