Question

我遇到了Kendo AutoComplete小部件的奇怪问题。设置如下

我在document.ready上填充了一个kendo下拉列表，并将一个零值抛给一个用于填充kendo自动完成小部件的函数，在LoadStates函数的change事件上，它调用LoadCounty函数并传递所选的id然后自动完成加载，但它都疯了。

以下是document.ready

的外观

以下是我选择州后的方式

不用多说，这是代码

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Untitled</title>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.common-bootstrap.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.blueopal.min.css">

  <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2017.3.913/js/kendo.all.min.js"></script>
</head>

<body>
  <div class="container">
    <div class="form-horizontal">
      <div class="row">
        <div class="col-md-5">
          <div class="form-group">
            <input id="txtState" />
          </div>
        </div>
      </div>
      <!-- End txtState -->

      <div class="row">
        <div class="col-md-5">
          <div class="form-group">
            <input id="txtCounty" />
          </div>
        </div>
      </div>
      <!-- End txtState -->

    </div>
    <!-- End form horizontal -->
  </div>


  <script>
    $(document).ready(function() {
      var stateData = [{
          "StateID": 1,
          "StateName": "Oklahoma"
        },
        {
          "StateID": 2,
          "StateName": "Texas"
        }
      ];

      LoadStates(stateData);
      LoadCounty(0);
    });

    function LoadStates(stateData) {
      var countyData1 = [{
          "CountyID": 1,
          "CountyName": "CountyA"
        },
        {
          "CountyID": 2,
          "CountyName": "CountyB"
        },
        {
          "CountyID": 3,
          "CountyName": "CountyC"
        },
        {
          "CountyID": 4,
          "CountyName": "CountyD"
        }
      ];

      var countyData2 = [{
          "CountyID": 5,
          "CountyName": "CountyE"
        },
        {
          "CountyID": 6,
          "CountyName": "CountyF"
        },
        {
          "CountyID": 7,
          "CountyName": "CountyG"
        },
        {
          "CountyID": 8,
          "CountyName": "CountyH"
        }
      ];

      $("#txtState").kendoDropDownList({
        dataSource: stateData,
        index: 0,
        dataTextField: "StateName",
        dataValueField: "StateID",
        animation: false,
        optionLabel: "State",
        change: function(e) {
          var dataItem = e.sender.dataItem();
          if (dataItem.StateID === 1) {
            LoadCounty(countyData1);
          } else {
            LoadCounty(countyData2);
          }

        }
      });
    }

    function LoadCounty(countyData) {
      $("#txtCounty").kendoAutoComplete({
        dataSource: countyData,
        dataTextField: "CountyName",
        dataValueField: "CountyID",
        filter: "startswith",
        placeholder: "Type County...",
        select: function(e) {
          var DataItem = this.dataItem(e.item.index());
          currentSelectedItem = DataItem.CountyID;
        }
      });
    }
  </script>
</body>

</html>

Answer 1

Kendo不够聪明，无法重新初始化窗口小部件，因此您无法在现有窗口小部件上初始化窗口小部件。你必须destroy它并清除它剩下的DOM（是的，它会留下无用的元素）。我建议您使用目标元素创建一个模板 - 在这种情况下为txtCounty - 并在每次需要刷新自动完成小部件时重新创建它：

function LoadCounty(countyData) {
    var $acEl = $("#txtCounty"),
        $container = $("#county-container");

    if ($acEl.data("kendoAutoComplete")) {
        // Destroys the widget
        $acEl.data("kendoAutoComplete").destroy();

        // Clears the container
        $container.empty();
    }

    // Get the template and append to the container
    var template = kendo.template($("#county-template").html());
    $container.html(template({}));

    $("#txtCounty").kendoAutoComplete({
        dataSource: countyData,
        dataTextField: "CountyName",
        dataValueField: "CountyID",
        filter: "startswith",
        placeholder: "Type County...",
        select: function(e) {
          var DataItem = this.dataItem(e.item.index());
          currentSelectedItem = DataItem.CountyID;
        }
    });
}

模板：

<script id="county-template" type="text/x-kendo-template">
    <input id="txtCounty" />
</script>

我知道这很糟糕，但这就是剑道的方式。在您的代码下方更新：

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Untitled</title>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.common-bootstrap.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.blueopal.min.css">

  <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2017.3.913/js/kendo.all.min.js"></script>
  <script id="county-template" type="text/x-kendo-template">
    <input id="txtCounty" />
  </script>
</head>

<body>
  <div class="container">
    <div class="form-horizontal">
      <div class="row">
        <div class="col-md-5">
          <div class="form-group">
            <input id="txtState" />
          </div>
        </div>
      </div>
      <!-- End txtState -->

      <div class="row">
        <div class="col-md-5">
          <div class="form-group" id="county-container">
          </div>
        </div>
      </div>
      <!-- End txtState -->

    </div>
    <!-- End form horizontal -->
  </div>


  <script>
    $(document).ready(function() {
      var stateData = [{
          "StateID": 1,
          "StateName": "Oklahoma"
        },
        {
          "StateID": 2,
          "StateName": "Texas"
        }
      ];

      LoadStates(stateData);
      LoadCounty(0);
    });

    function LoadStates(stateData) {
      var countyData1 = [{
          "CountyID": 1,
          "CountyName": "CountyA"
        },
        {
          "CountyID": 2,
          "CountyName": "CountyB"
        },
        {
          "CountyID": 3,
          "CountyName": "CountyC"
        },
        {
          "CountyID": 4,
          "CountyName": "CountyD"
        }
      ];

      var countyData2 = [{
          "CountyID": 5,
          "CountyName": "CountyE"
        },
        {
          "CountyID": 6,
          "CountyName": "CountyF"
        },
        {
          "CountyID": 7,
          "CountyName": "CountyG"
        },
        {
          "CountyID": 8,
          "CountyName": "CountyH"
        }
      ];

      $("#txtState").kendoDropDownList({
        dataSource: stateData,
        index: 0,
        dataTextField: "StateName",
        dataValueField: "StateID",
        animation: false,
        optionLabel: "State",
        change: function(e) {
          var dataItem = e.sender.dataItem();
          if (dataItem.StateID === 1) {
            LoadCounty(countyData1);
          } else {
            LoadCounty(countyData2);
          }

        }
      });
    }

    function LoadCounty(countyData) {
      var $acEl = $("#txtCounty"),
          $container = $("#county-container");
      
      if ($acEl.data("kendoAutoComplete")) {
        // Destroys the widget
        $acEl.data("kendoAutoComplete").destroy();
        
        // Clears the container
        $container.empty();
      }
      
      // Get the template and append to the container
      var template = kendo.template($("#county-template").html());
      $container.html(template({}));
    
      $("#txtCounty").kendoAutoComplete({
        dataSource: countyData,
        dataTextField: "CountyName",
        dataValueField: "CountyID",
        filter: "startswith",
        placeholder: "Type County...",
        select: function(e) {
          var DataItem = this.dataItem(e.item.index());
          currentSelectedItem = DataItem.CountyID;
        }
      });
    }
  </script>
</body>

</html>

＆＃13;

我希望它有所帮助。

在填充之后，Kendo Autocomplete风格变得疯狂

1 个答案: