如何以编程方式关闭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自动完成

回答

相关问题