Question

我已将Kendo UI自动完成小部件添加到我的Web应用程序。现在，它已绑定到静态名称列表，但是到生产时，它需要能够从数据源动态获取名称。

在数据源中，每个名称都有一个ID，但是用户永远不会看到该ID，因为它是一个人工密钥。

如果用户键入“ Sam H”，则Kendo可能会建议用户用“ Sam Harris”或“ Sam Houston”填写表格。如果用户选择其中之一，或者如果她手动键入这两个名称之一，则在提交表单时，可以将该名称与数据源和找到的ID进行比较。（因为最终，我们要存储所选用户的ID）

但是，我需要处理用户键入的名称与数据源中的任何内容都不匹配的情况。在这种情况下，Web应用程序应阻止用户提交表单，并建议她进行有效选择。

我该怎么做？

（我将Kendo UI与AngularJS 1.6一起使用）

Answer 1

在这里您可以找到有关绑定的示例以及使用方法。我在我从事的项目中找到了一个例子。

    <input kendo-auto-complete ng-model="country" k-data-source="countryNames" k-options="autocompleteoptions" />

<script>
  angular.module("KendoDemos", [ "kendo.directives" ])
          .controller("MyCtrl", function($scope){
                        $scope.autocompleteoptions = {
                //dataSource: items,
                //dataTextField: "name",
                //dataValueField: "id",
                //filter: "contains",
                minLength: 2,
                select: function (e) {
                  console.log(e);
                    var dataItem = this.dataItem(e.item.index());
                    console.log(dataItem);
                }
              }

              $scope.countryNames = [
              "Albania",
              "Andorra",
              "Armenia",
              "Austria",
                  ];
          })
</script>

以道场为例：Dojo

以下是有关Angular JS绑定的一些信息：https://docs.telerik.com/kendo-ui/AngularJS/introduction#the-k-value-primitive-attribute

希望这会对您有所帮助。

欢呼

如何验证用户在Kendo UI自动完成小部件上进行了选择？

1 个答案: