Question

我试图在3个字符之后发起请求但是一旦输入3个字符我发现没有找到记录错误，之后我可以找到服务调用完成但是没有显示在自动完成中（只有错误消息）在自动完成下拉菜单中。。我在这里错过了什么？

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

  $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

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

当我错误配置remote-url-data-field时，响应已经完成，但是angucomplete读取了＆＃34;没有找到结果＆＃34;

请参阅插件上的注释，并尝试按照它的工作方式进行配置如果您无法绑定正确的属性，请从您的api提供响应示例，我们可以提出解决方案

使用$ timeout

使用$timeout添加延迟的原因并不明显，您可以在两个示例中执行此操作。这样做的唯一方法是添加给定时间的人为延迟。如果原因是在触发API请求的输入字段中添加一些去抖/延迟，则不会将其删除。

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

Answer 2

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

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

Answer 3

根据我在您的代码和文档中看到的内容，我认为问题是您立即从$timeout函数中的searchAPI返回了一个Promise，该函数尽快得到解决达到超时时间。这就是为什么你会看到“找不到记录”，然后你的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被使用后解决。

Angucomplete Alt：获取＆＃34;未找到结果＆＃34;在获得服务器响应之前

3 个答案:

第一个例子

第二个例子

使用$ timeout