如何以编程方式关闭 Kendo UI 自动完成

Question

我在 ASP.Net MVC 应用程序中使用 Kendo UI 自动完成框。（KENDO UI ASP.NET MVC Q1 2016）

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

该元素需要预先填充一个值。我在 ui 加载后这样做：

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


});

调用 "Close" 方法应该关闭建议（根据我在 documentation 中的理解）但它不起作用（建议仍然打开）。如果我在 ui 中滚动 window 或单击其他地方，它会立即关闭，但以编程方式将焦点设置到另一个元素或通过代码触发点击事件无济于事。我可以 hide/change DOM-元素一个接一个，但我不认为这是一个好的解决方案，当用鼠标单击选择项目时，有太多属性发生变化。

代码中的其他一切工作正常（绑定源、选择元素等等 - 我没有 post 这里这些部分的 JS 代码）。我也尝试过使用 "suggest" 方法，但没有任何运气。任何想法或正确方向的提示？

这是调用 "Close" 方法后自动完成的样子（仍然打开）： Screenshot of Autocomplete Box with open suggestions

Answer 1

抱歉...我又一次陷入了异步加载陷阱... 当然，我需要等待数据绑定事件，直到我应该 select 该项目...

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

现在一切正常！虽然有点尴尬，但我不会删除这个post。也许其他人需要一些帮助才能离开软管...

如何以编程方式关闭 Kendo UI 自动完成

How to close Kendo UI Autocomplete programmatically

autocomplete

kendo-ui

kendo-asp.net-mvc