Kendo ComboBox输入已有选项切换焦点后未保存输入问题咨询

你的问题核心出在自定义验证规则对selectedIndex的强制要求——哪怕你输入了下拉列表里存在的文本，只要没手动点击选中下拉项，验证就会失败，进而触发组件重置值的行为。下面给你拆解问题原因和修复方案：

问题根源分析 #

先看你提供的这段验证代码：

Id: { 
  type: "number", 
  validation: { 
    idvalidation: function (input) { 
      if (input.is("[name='Id']") && input.val() !== "") { 
        input.attr("data-idvalidation-msg", "Please select a Code"); 
        return input.val() >= 0 && $("#Id").data("kendoComboBox").selectedIndex >= 0; 
      } 
      return true; 
    } 
  } 
},

这里的验证逻辑要求selectedIndex >= 0，也就是必须从下拉列表手动选中某一项才算合法。但Kendo ComboBox默认状态下，仅输入文本而不点击选中项时，selectedIndex会保持为-1，这直接触发了验证失败，最终导致组件把输入的内容重置掉。

修复方案 #

我们需要调整验证规则，不再依赖selectedIndex，而是根据你的实际需求来判断输入是否合法：

场景1：仅允许输入下拉列表中已存在的文本（无需手动选中） #

修改验证函数，通过ComboBox的数据源检查输入的文本是否在列表内：

Id: { 
  type: "number", 
  validation: { 
    idvalidation: function (input) { 
      if (input.is("[name='Id']") && input.val() !== "") { 
        input.attr("data-idvalidation-msg", "Please enter a valid Code"); 
        const comboBox = $("#Id").data("kendoComboBox");
        // 从数据源中提取所有可选的文本项
        const availableTexts = comboBox.dataSource.data().map(item => item.Code);
        // 获取用户实际输入的文本（注意：ComboBox绑定Id时，val()是Id值，text()才是输入的文本）
        const inputText = comboBox.text().trim();
        // 同时验证Id数值合法，且输入文本在可选列表中
        return input.val() >= 0 && availableTexts.includes(inputText);
      } 
      return true; 
    } 
  } 
},

场景2：允许自由输入任意文本（无论是否在下拉列表中） #

如果你的需求是支持用户输入任意内容，哪怕不在下拉列表里，只需移除对selectedIndex的判断即可：

Id: { 
  type: "number", 
  validation: { 
    idvalidation: function (input) { 
      if (input.is("[name='Id']") && input.val() !== "") { 
        input.attr("data-idvalidation-msg", "Please enter a valid Id"); 
        // 仅验证Id的数值合法性，不再强制要求选中下拉项
        return input.val() >= 0; 
      } 
      return true; 
    } 
  } 
},

额外体验优化 #

为了让用户输入匹配文本时更顺畅，可以给ComboBox加上selectFirst: true配置——这样用户输入的文本匹配下拉项时，组件会自动选中第一个匹配项，selectedIndex也会自动赋值，从根源避免验证冲突：

$("#Id").kendoComboBox({
  dataSource: yourDataSource,
  dataTextField: "Code",
  dataValueField: "Id",
  selectFirst: true, // 自动选中第一个匹配的下拉项
  filter: "contains" // 可选：开启过滤，方便用户快速查找项
});

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