どのように剣道UIのオートコンプリートをプログラムによって閉じます

Question

私は剣道のUIオートコンプリートボックスをASP.Net MVCアプリケーションで使用しています。 （ASP.NET MVCのQ1 2016のための剣道UI）

.cshtmlコードの一部は次のようになります

<div class="row"> 
     <div class="col-md-10"> 
      <div class="form-group"> 
       @Html.Label(Strings.ManagerTimeEffortFormPartial_LabelLookupCustomer, new { @class = "k-label" }) 
       @Html.TextBox("CustomerId", "", new { style = "display: none;" }) 
       @(Html.Kendo().AutoComplete() 
       .Name("CustomerName") 
       .DataTextField("DisplayName") 
       .Filter(FilterType.Contains) 
       .MinLength(3) 
       .DataSource(source => 
       { 
        source.Read(read => 
        { 
         read.Action("SearchCustomers", "Customer") 
          .Data("onSearchManagerEffortCustomerName"); 
        }) 
        .ServerFiltering(true); 
       }) 
       .HtmlAttributes(new { @class = "k-textbox-fullwidth" }) 
       .Events(e => 
       { 
        e.Select("onSelectManagerEffortCustomer"); 

       }) 
       ) 
      </div> 
     </div> 
    </div> 

要素の値を予め充填する必要があります。 （提案はまだ開いている）（私はdocumentationで理解するものから）提案を閉じてください「閉じる」メソッドを呼び出す

$(function() { 

    var customerValue = $("#Project_CustomerName").val(); 

    var customerNameAutoComplete = $("#CustomerName").data("kendoAutoComplete"); 
    $("#CustomerName").val(customerValue); 

    customerNameAutoComplete.search(customerValue);  

    customerNameAutoComplete.select(customerNameAutoComplete.ul.children().eq(0)); 
    customerNameAutoComplete.close(); 


}); 

が、それは動作しません：UIがロードされた後、私はこれをやっています。ウィンドウをuiでスクロールしたり、別の場所をクリックしたりするとすぐに閉じられますが、プログラムで別の要素にフォーカスを設定したり、コードを使用してクリックイベントをトリガすることは役に立ちません。 DOM要素を1つずつ隠す/変更することはできますが、これは良い解決策ではないと考えています。マウスクリックで項目を選択すると属性が多すぎます。

コード内の他のすべてがうまく動作します（バインディングソース、要素の選択など - ここではJSコードを投稿しません）。私はまた、 "お勧め"の方法で遊ぶことを試みました。正しいアイデアや正しい方向のヒント？

これは、オートコンプリートが（まだ開いて）「閉じる」メソッドを呼び出した後にどのように見えるかです：このため Screenshot of Autocomplete Box with open suggestions

Answer 1

申し訳ありません...再び私はもちろんの ...非同期ロードのトラップに巻き込まれました私は今では完全に正常に動作

<div class="row"> 
     <div class="col-md-10"> 
      <div class="form-group"> 
       @Html.Label(Strings.ManagerTimeEffortFormPartial_LabelLookupCustomer, new { @class = "k-label" }) 
       @Html.TextBox("CustomerId", "", new { style = "display: none;" }) 
       @(Html.Kendo().AutoComplete() 
       .Name("CustomerName") 
       .DataTextField("DisplayName") 
       .Filter(FilterType.Contains) 
       .MinLength(3) 
       .Suggest(false) 
       .DataSource(source => 
       { 
        source.Read(read => 
        { 
         read.Action("SearchCustomers", "Customer") 
          .Data("onSearchManagerEffortCustomerName"); 
        }) 
        .ServerFiltering(true); 
       }) 
       .HtmlAttributes(new { @class = "k-textbox-fullwidth" }) 
       .Events(e => 
       { 
        e.Select("onSelectManagerEffortCustomer"); 
        e.DataBound("OnCustomerDataBound"); 
       }) 
       ) 
      </div> 
     </div> 
    </div> 

    <script> 
function OnCustomerDataBound() { 

     var customerNameAutoComplete = $("#CustomerName").data("kendoAutoComplete");  
     var select = customerNameAutoComplete.ul.children().eq(0); 
     customerNameAutoComplete.select(select); 
     customerNameAutoComplete.close(); 


} 
    $(function() { 

    var customerValue = $("#Project_CustomerName").val(); 
    var customerId = $("#Project_CustomerId").val(); 
    var consProjectId = $("#Project_ConsultingProjectId").val(); 

    var customerNameAutoComplete = $("#CustomerName").data("kendoAutoComplete"); 
    $("#CustomerName").val(customerValue); 
    $("#CustomerId").val(customerId); 
    customerNameAutoComplete.search(customerValue);  

    customerNameAutoComplete.trigger("change"); 
    RefreshDropDownList("ManagerEffortCustomerProjects"); 
}); 

...私は項目を選択する必要があるまで、イベントをバインドされたデータを待つ必要があります！それは恥ずかしいですが、私はこの投稿を削除しません。多分誰かがホースを脱ぐために何か助けを必要とするでしょう...