Kendo自动完成,如何在dataTextField中插入多个值

时间:2014-12-08 11:56:46

标签: javascript jquery autocomplete kendo-ui

我正在尝试在所选项目之后向dataTextField属性中插入多个值(模板工作正常但仅影响在下拉菜单中向用户显示的内容)。我尝试使用parse functionl解决id:

schema: {
            parse: function(response) {
                $.each(response, function(idx, elem) {
                    elem.fullName = elem.name + " " + elem.surname;
                });
                return response;
            }
        },

但这不起作用。

是不是在datagrid中的表单中的独立自动完成。

我该如何解决?

感谢您的帮助。

以下是整个方法的代码:

$scope.$watch("workerDetail.newSuperiorName", function () {
  console.log($scope.workerDetail.superior);
  $scope.customOptionsSuperior = {
    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.workerDetail.newSuperiorName,
                    "operator": "contains",
                    "field": "name",
                    "ignoreCase": true
                  },
                  {
                    "value": $scope.workerDetail.newSuperiorName,
                    "operator": "contains",
                    "field": "surname",
                    "ignoreCase": true
                  }
                ]
              },
              "sort": [
                {
                  "field": "name",
                  "dir": "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);
                    options.success([]);
                  } 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");
              growlNotifications.add($translate.instant('AUTOCOMPLETE_ERROR'), 'error', $rootScope.notificationLifetime);
            });
        }
      }
    },
    schema: {
        parse: function(response) {
            $.each(response, function(idx, elem) {
                elem.fullName = elem.name + " " + elem.surname;
            });
            return response;
        }
    },
    dataTextField: "fullName",
    // using  templates:
    template: '#: data.name # #: data.surname #',
    change: function (option, data) {
      console.log("change");
      console.log(this.value());
    },
    // event triggered after selection of the item from autocomplete
    select: function (e) {
      console.log("select");
      var item = e.item;
      var text = item.text();
      var index = item.index();
      var dataItem = this.dataItem(index);
      $scope.workerDetail.superior = dataItem;

    }
  };
});

1 个答案:

答案 0 :(得分:0)

您的解析思想应该有效,但您的架构定义不在数据源之内。如果将它放在数据源中,它应该没有问题。

dataSource: { 
   ...
   schema: {
       ...
   }
}

这是一个有效的例子:

http://dojo.telerik.com/eWapI/2