如何以編程方式關閉Kendo UI自動完成

我在ASP.Net MVC應用程序中使用Kendo UI自動完成框。（KENDO UI用於ASP.NET MVC Q1 2016）如何以編程方式關閉Kendo 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>

的元件需要用值預先填充。用戶界面加載後，我這樣做：

$(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(); 


});

調用「關閉」的方法應該關閉的建議（從我的理解documentation），但它不工作（的建議仍然是開放的）。如果我在ui中滾動窗口或者在其他地方點擊，它會立即關閉，但以編程方式將焦點設置爲另一個元素或通過代碼觸發點擊事件並不會有幫助。我可以逐個隱藏/更改DOM元素，但我認爲這不是一個好的解決方案，當用鼠標點擊選擇項目時，會有太多屬性發生變化。

代碼中的其他一切工作正常（綁定源，選擇元素等 - 我沒有在這裏發佈這些部分的JS代碼）。我也試圖用「建議」方法玩，沒有任何運氣。任何想法或提示正確的方向？

這是自動完成的樣子叫「關閉」的方法（仍處於打開狀態）後： Screenshot of Autocomplete Box with open suggestions

來源

2016-05-30 Melanie Pl

對不起，這個......，我再次得到了由異步加載陷阱抓住了......當然我需要等待數據綁定事件，直到我應該選擇項目...

<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"); 
});

現在工作完全正常！雖然有點尷尬，但我不會刪除這篇文章。也許別人需要一些幫助才能離開軟管......

來源

2016-05-30 13:55:27

如何以編程方式關閉Kendo UI自動完成

回答

相關問題