如何禁止用户在Kendo AutoComplete输入框中手动输入内容？

没问题，我来帮你搞定这个需求！要让用户只能从预设的「One」「Two」选项里选择，禁止手动输入自定义内容，最直接的方法就是利用Kendo AutoComplete的内置配置项。

方法一：使用editable: false配置（推荐） #

这个配置会直接让输入框变成只读状态，用户无法手动输入任何内容，只能点击下拉箭头选择预设选项。修改你的代码如下：

<input id="autocomplete" /> 
<script> 
$("#autocomplete").kendoAutoComplete({ 
    dataSource: { 
        data: ["One", "Two"] 
    },
    editable: false // 关键配置：禁用手动输入，仅允许选择预设选项
}); 
</script>

设置完成后，输入框就只能通过选择下拉列表里的选项来赋值，完全无法手动输入或修改内容，完美匹配你的需求。

方法二：保持视觉可编辑样式，限制输入内容（可选） #

如果你希望输入框看起来还是可编辑的状态，但实际只能输入预设选项里的内容，可以通过监听change事件来校验并重置值：

<input id="autocomplete" /> 
<script> 
$("#autocomplete").kendoAutoComplete({ 
    dataSource: { 
        data: ["One", "Two"] 
    },
    select: function(e) {
        // 记录用户选中的合法值
        this._validValue = e.item.text();
    },
    change: function(e) {
        const currentValue = this.value();
        const validOptions = this.dataSource.data();
        // 检查当前输入值是否在合法选项中
        if (!validOptions.includes(currentValue)) {
            // 若不合法，重置为之前选中的有效值或空
            this.value(this._validValue || "");
        }
    }
}); 
</script>

不过这种方法需要额外的事件处理，不如第一种方法简洁高效，所以更推荐直接用editable: false。

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