Question

我在ASP.Net MVC应用程序中使用Kendo UI自动完成框。（ASP.NET MVC 2016年第1季度的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>

元素需要预先填充值。我在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();


});

调用“关闭”方法应该关闭建议（根据我在documentation中的理解），但它不起作用（建议仍然是开放的）。如果我在ui中滚动窗口或单击其他位置，它会立即关闭，但是以编程方式将焦点设置为另一个元素或通过代码触发单击事件无济于事。我可以逐个隐藏/更改DOM元素，但我不认为这是一个很好的解决方案，当用鼠标点击选择项目时，有太多属性会改变。

代码中的其他所有工作正常（绑定源，选择元素等等 - 我没有在这里发布这些部分的JS代码）。我也试着玩“建议”的方法，没有任何运气。是否有任何想法或暗示正确的方向？

这是调用“Close”方法（仍然打开）后自动完成的样子： 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");
});

现在它完美无缺！虽然有点尴尬，但我不会删除这篇文章。也许其他人需要一些帮助来取消软管...

如何以编程方式关闭Kendo UI Autocomplete

1 个答案: