javascript - 当用户在Kendo自动完成中按下退格键时防止回退

我有一个Kendo自动完成下拉列表，其中包含搜索过滤器。

当我从下拉菜单中选择一个特定的项目时，该值将被成功选择并保存到数据库，但是当我按下AutoComplete中的退格键时，该页面将自动回发，而无需用户从下拉菜单中选择任何搜索到的值。

按下退格键之后的值（不是所需的值或选定的值）将传递到控制器，然后传递到DB。

具体实现如下：

@(Html.Kendo().AutoComplete()

        .Name("SampleCode")
        .DataTextField("Code")


    .Suggest(true)
    .Filter(FilterType.Contains)
            .DataSource(source =>
            {
                source.Read(read =>
                {
                    read.Action("GetCode", "GetFunct") // call to controller function
                        .Data("FilterCode");
                })
                .ServerFiltering(true);
            })

             .HtmlAttributes(new { @class = "selectlist", style = "width:204px" })
             .Events(evt => evt.Close("OnSelectCode"))

)

这是Javascript代码

<script>
    function FilterCode() {

        var SubCode = $("#SubCode")[0].form.SubCode.value;
        //The values in SampleCode dropdown are displayed depending upon the value selected in SubCode dropdown
        return {
            subCode: subCode
        }
    }

    function OnSelectCode(e) {

        var Code = $("#SampleCode").data("kendoAutoComplete").value().toString();
}

</script>

控制器功能正常运行，并且数据已正确加载到AutoComplete中，这就是为什么我没有发布相应的代码。

任何想法都是最欢迎的:)

最佳答案

为了防止当用户在Kendo Auto complete中按下退格键时回发到控制器，您必须确保将变量与close（）函数绑定

解决方案后的代码：

@(Html.Kendo().AutoComplete()

    .Name("SampleCode")
    .DataTextField("Code")


.Suggest(true)
.Filter(FilterType.Contains)
        .DataSource(source =>
        {
            source.Read(read =>
            {
                read.Action("GetCode", "GetFunct") // call to controller function
                    .Data("FilterCode");
            })
            .ServerFiltering(true);
        })

         .HtmlAttributes(new { @class = "selectlist", style = "width:204px" })
         .Events(evt => evt.select("OnSelectCode"))  //Changed from "evt.Close" to "evt.Select" to prevent post back when user presses backspace


)

您可以通过Kendo Autocomplete控件使用.select事件，但是在Javascript函数“ OnSelectCode”内部，您可以使用“ close”属性绑定变量

如下更改JavaScript函数OnSelectCode：-

function OnSelectCode(e) {

        var Code = $("#SampleCode").data("kendoAutoComplete").value().toString();
        Code.bind("close", OnSelectCode); // Added to prevent post back when user presses backspace, close the function called by the .select event in Kendo Auto Complete

}