剑道组合框按键事件答案

【问题标题】：Kendo Combo Box onkeypress Event剑道组合框按键事件
【发布时间】：2023-04-02 04:43:02
【问题描述】：

我在处理组合框上的大数据时遇到问题，因为它至少返回 16,000 条记录 我尝试了这种方法JsonReturnResult.MaxJsonLength = int.MaxValue;，但我的浏览器仍然挂起。现在我要做的是在 User 按下 Enter 时触发查询。

这是我的代码：

<script>
function onSelectCAO() {
                     var AccountName = $("#ChildAccountCode").val();
                     $("#account_name").data("kendoComboBox").value(AccountName);
                     document.getElementById("text_AcccountName").value = AccountName;

                 }
</script>

<input type="text" id="text_AcccountName" name="text_AcccountName" style="width:80%;" hidden="hidden"/>

@(Html.Kendo().ComboBox()

                                .Name("ChildAccountCode")
                                .DataTextField("ChildAccountCode1")
                                .Filter(FilterType.Contains)
                                .MinLength(3)
                                .Placeholder("Select ChildAccountCode")
                                .DataValueField("AccountName1")
                                .HtmlAttributes(new { @style = "width: 200px;" })
                                .Events(e =>
                                    {
                                        e.Change("onSelectCAO");
                                    })
                                                    .DataSource(source =>
                                                                {
                                                                    source.Read(read =>
                                                                        {
                                                                            read.Action("ddlChildAccountCode", "Dropdowns");
                                                                        });
                                                                })                                                                                       
             )

我想要完成的是当用户按下Enter 时，它只会根据用户输入的内容返回结果

【问题讨论】：

标签： c# asp.net-mvc combobox keypress kendo-combobox

【解决方案1】：

我已经解决了我的问题。所以这是我的解决方案，我将AutoBind 设置为false，并将DataSource 上的 Parameter 设置为查询的过滤器或条件

@(Html.Kendo().ComboBox()

                                .Name("ChildAccountCode")
                                .DataTextField("ChildAccountCode")
                                .Filter(FilterType.Contains)
                                .MinLength(3)
                                .Placeholder("Select ChildAccountCode")
                                .DataValueField("AccountName")
                                .HtmlAttributes(new { @style = "width: 200px;" })
                                .AutoBind(false)
                                .Events(e =>
                                    {
                                        e.Change("onSelectCAO");
                                    })
                                                    .DataSource(source =>
                                                                {
                                                                    source.Read(read =>
                                                                        {
                                                                            read.Action("ddlChildAccountCode", "Dropdowns").Data("AccountCodeParameter");
                                                                        });
                                                                })                                                                                       
             )

【讨论】：

【解决方案2】：

内部脚本。

$("#DropDownID").data("kendoComboBox").input.keydown(function (e) {
console.log("KeyPressed");
  console.log(e.keyCode);
}

【讨论】：

【解决方案3】：

我强烈建议您通过 Kendo 的 ServerFilteringTrue 属性获取数据到组合框。因为 16000 条记录太高了。

您可以在 Kendo 上使用包含和业务方面的文本过滤您可以使用您在组合框中输入的文本按名称和 ID 进行过滤。

jquery中的过滤方法可以像

function filterByText() {
    var mainText = $("#DropDownID").data("kendoComboBox").input.val();
    return {
        text: mainText
    };
}

和剑道组合框一样

<div class="form-group">
    <label class="col-md-3 control-label">@Html.LabelFor(m => m.SomeModelId)</label>
    <div class="col-md-9">
        @(Html.Kendo().ComboBoxFor(m => m.SomeModelId)
                 .DataTextField("ChildAccountCode")
                 .DataValueField("Id")
                 .HtmlAttributes(new { style = "width: 100%", id = "ChildAccountCode", data_value_primitive = "true", required = "required", validationMessage = "Select code" })
                 .Placeholder("Select some code")
                 .Filter("contains")
                 .AutoBind(true)
                 .Suggest(false)
                 .DataSource(source =>
                 {
                     source.Read(read =>
                     {
                         read.Action("ddlChildAccountCode", "DropDowns").Data("filterByText");
                     })
                     .ServerFiltering(true);
                 }).AutoBind(true)
        )
    </div>
</div>

例如在您的控制器中，如果文本参数长度小于 3，则您不能向组合框填充任何内容，这样可以降低 DB 调用的成本。

希望对你有用

【讨论】：