Kendo Autocomplete选择下拉项后无法过滤DataSource的解决方法

页面中存在共用同一DataSource的AutoComplete组件与ListView，ListView展示数据源数据，AutoComplete用于过滤ListView内容。输入内容时，DataSource会自动过滤，ListView随之更新；但在AutoComplete下拉列表中选择值时，不会触发过滤，ListView内容无变化。现有代码如下：

<div class="col-md-12 d-flex justify-content-center align-items-center">
    @(Html.Kendo().DataSource<ProjectQueue>()
        .Name("projectDataSource")
        .Ajax(dataSource => dataSource
           .Read(read => read.Action("ProjectDataSource_Read", "Home"))
           .ServerOperation(false)
        )
    )
    @(Html.Kendo().AutoComplete()
        .Name("autoComplete")
        .DataTextField("Name")
        .Filter(FilterType.Contains)
        .MinLength(2)
        .DataSource("projectDataSource")
    )

</div>
<div class="col-md-12 d-flex justify-content-center align-items-center">
    @(Html.Kendo().ListView<ProjectQueue>()
        .Name("projectsListView")
        .ClientTemplateId("template")
        .TagName("div")
        .HtmlAttributes(new { style = "width:100%;" })
        .Scrollable()
        .DataSource("projectDataSource")
        .Selectable(selectable => selectable.Mode(ListViewSelectionMode.Single))
        .Events(events => events.Change("onChangeProject"))
    )
</div>

方案一：选择AutoComplete下拉项时触发过滤 #

AutoComplete默认选择项不会给数据源添加过滤条件，需要手动在选择事件中添加过滤规则并刷新ListView：

1. 修改AutoComplete配置，绑定选择事件 #

@(Html.Kendo().AutoComplete()
    .Name("autoComplete")
    .DataTextField("Name")
    .Filter(FilterType.Contains)
    .MinLength(2)
    .DataSource("projectDataSource")
    .Events(events => events.Select("onAutoCompleteSelect")) // 添加选择事件绑定
)

2. 编写选择事件处理函数 #

function onAutoCompleteSelect(e) {
    // 获取选中项的文本内容
    var selectedText = e.item.text();
    // 获取ListView关联的数据源实例
    var dataSource = $("#projectsListView").data("kendoListView").dataSource;

    // 清除原有过滤规则，添加新的包含匹配过滤
    dataSource.filter({
        filters: [{
            field: "Name",
            operator: "contains",
            value: selectedText
        }]
    });

    // 触发数据源读取，同步更新ListView内容
    dataSource.read();
}

配置完成后，选择AutoComplete下拉项时，会自动给DataSource添加过滤条件，ListView内容将同步更新。

方案二：禁用AutoComplete下拉列表，仅保留输入功能 #

如果不需要下拉选择功能，只保留输入过滤，可以通过以下两种方式实现：

方法1：隐藏AutoComplete下拉面板 #

方式A：利用Open事件立即关闭下拉

修改AutoComplete配置：

@(Html.Kendo().AutoComplete()
    .Name("autoComplete")
    .DataTextField("Name")
    .Filter(FilterType.Contains)
    .MinLength(2)
    .DataSource("projectDataSource")
    .Events(events => events.Open("onAutoCompleteOpen"))
)

添加JS处理函数：

function onAutoCompleteOpen(e) {
    // 下拉面板打开时立即关闭
    e.sender.close();
}

方式B：用CSS强制隐藏下拉容器

.k-autocomplete .k-popup {
    display: none !important;
}

方法2：改用TextBox组件手动实现输入过滤 #

直接替换AutoComplete为TextBox，监听输入事件来过滤数据源：

@(Html.Kendo().TextBox()
    .Name("filterTextBox")
    .HtmlAttributes(new { placeholder = "输入关键词过滤（至少2个字符）" })
)

添加输入过滤逻辑：

$(function() {
    $("#filterTextBox").on("input", function() {
        var inputValue = $(this).val().trim();
        var dataSource = $("#projectsListView").data("kendoListView").dataSource;

        if (inputValue.length >= 2) {
            // 添加包含规则过滤数据源
            dataSource.filter({
                filters: [{
                    field: "Name",
                    operator: "contains",
                    value: inputValue
                }]
            });
        } else {
            // 输入长度不足时清除所有过滤
            dataSource.filter({});
        }
    });
});

内容的提问来源于stack exchange，提问作者lcnw