剑道自动完成风格正在填充

我遇到了一个奇怪的问题与剑道自动完成构件。该设置如下剑道自动完成风格正在填充

我有一个剑道DROPDOWNLIST被填充上的document.ready和投掷零后发疯值添加到一个用于填充kendo自动填充小部件的函数中，在LoadStates函数的change事件中，它调用LoadCounty函数并传递选定的id，然后传递自动完成加载，但它全部疯狂。

下面是它的外观上的document.ready

，这里是它如何loosk一旦我选择的状态

而且事不宜迟，这里是代码

<!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>

来源

2017-09-24 Chris

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>

我知道这很糟糕，但这就是剑道走的路。下面的代码更新：

<!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>

我希望它能帮助。

来源

2017-09-25 11:46:25 DontVoteMeDown

剑道自动完成风格正在填充

回答

相关问题