剣道オートコンプリートのスタイルは、私は剣道オートコンプリートウィジェットとの奇妙な問題に実行しています

を移入された後狂う...セットアップ剣道オートコンプリートのスタイルは、私は剣道オートコンプリートウィジェットとの奇妙な問題に実行しています

を次のように私は剣道はdocument.readyに取り込まれ、ゼロを投げされているのDropDownList持っています値を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

剣道は、ウィジェットを再初期化するほどスマートではないので、既存のウィジェットよりもウィジェットを初期化することはできません。あなたは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

剣道オートコンプリートのスタイルは、私は剣道オートコンプリートウィジェットとの奇妙な問題に実行しています

答えて

関連する問題