如果找到的结果计数为空,则Kendo自动完成功能停止工作

时间:2014-11-13 15:42:34

标签: jquery angularjs autocomplete kendo-ui

我有以下自动完成功能。

问题是如果返回的结果为null(没有值与输入的给定文本匹配)自动完成停止工作,这意味着预加载器微调器总是显示在输入中,如果文本被更改则不会创建请求。

我认为这个问题在这里,但我不知道如果结果为空则返回或设置:

 if(data.results == null) {
    growlNotifications.add($translate.instant('NO_ITEM_FOUND'), 'error',  $rootScope.notificationLifetime);
  return false;
} else {
  options.success(data.results);
}

以下是每次更改模型值时调用的方法代码(自动完成输入中的文本)。

非常感谢您的任何建议。

 $scope.$watch("teamDetail.newWorkerName", function(){
        console.log($scope.teamDetail.newWorkerName);

                $scope.customOptions = {
                    dataSource :  {
                        type: "json",
                        serverFiltering: true,
                        transport: {
                            read: function (options) {
                                console.log("List");
                                console.log(options.data);
                                console.log(options.data.filter.filters[0].value);
                                requestParams = {
                                    "entityName": "worker",
                                    "data" : {
                                        "page": 1,
                                        "pageSize": 20,
                                        "filter": {
                                            "logic": "or",
                                            "filters": [
                                                {
                                                    "value": $scope.teamDetail.newWorkerName,
                                                    "operator": "contains",
                                                    "field": "name",
                                                    "ignoreCase": true
                                                },
                                                {
                                                    "value": $scope.teamDetail.newWorkerName,
                                                    "operator": "contains",
                                                    "field": "surname",
                                                    "ignoreCase": true
                                                }
                                            ]
                                        },
                                        "sort": [
                                            {
                                                "field": "name",
                                                "ord": "asc"
                                            }
                                        ]
                                    }
                                };
                                ApiService.doHttpRequest(
                                    "POST",
                                    $rootScope.apiBaseUrl + "worker/search",
                                    requestParams
                                )
                                    .success(function (data, status, headers, config) {
                                        // successful data retrieval
                                        console.log("request success, checking state");
                                        console.log(data);
                                        // sent status to global HTTP status service
                                        var jsonResponse =  ApiService.processReturnedHttpState(status);
                                        console.log("Status response is " + jsonResponse.result);
                                        // do something with data
                                        switch (jsonResponse.result) {
                                            case true:
                                                if(data.results == null) {
                                                    growlNotifications.add($translate.instant('NO_ITEM_FOUND'), 'error',  $rootScope.notificationLifetime);
                                                    return false;
                                                } else {
                                                    options.success(data.results);
                                                }
                                                break;
                                            case false:
                                                growlNotifications.add($translate.instant('LIST_LOADING_ERROR'), 'error',  $rootScope.notificationLifetime);
                                                break;
                                        }
                                    })
                                    .error(function (data, status, headers, config) {
                                        console.log("Error");
                                        console.log("Autocomplete loading error");
                                    });
                            }
                        }
                    },
                    dataTextField: "name",
                    // using  templates:
                    template: '#: data.name # #: data.surname #',
                    change  : function (option, data) {
                        console.log("change");
                        console.log(this.value());
                    },
                    select: function(e) {
                        console.log("select");
                        var item = e.item;
                        var text = item.text();
                        var index = item.index();
                        console.log(item);
                        console.log(text);
                        console.log(index);
                        var dataItem = this.dataItem(index);

                        $scope.$apply(function() {
                            $scope.teamDetail.newWorkerName = text;
                        });

                        $scope.$apply(function() {
                            $scope.teamDetail.workers.push(dataItem);
                        });
                    }
                };
    });

1 个答案:

答案 0 :(得分:2)

KendoUI期待一个空数组而不是nullundefined。您可以执行的操作(如果您无法更改服务器返回的数据)在DataSource定义中添加schema元素并定义parse函数,以便在收到data作为{时{1}}返回null(和空数组)。

类似的东西:

[]

或者您可以修改您的代码:

dataSource: {
    transport : {
        read: ...
    },
    schema : {
        parse: function(data) {
            return data ? data : [];
        }
}