如何使 Kendo 下拉列表不区分大小写

Posted 2023-05-07

【中文标题】如何使 Kendo 下拉列表不区分大小写

【英文标题】：How can I make Kendo Drop Down List to Case Insensitive

【发布时间】：2017-10-29 05:10:15

【问题描述】：

我想为剑道下拉列表设置一个值，不管它是什么情况。

例如，下面的代码可以正常工作。

$("#color").data("kendoDropDownList").value("Grey");

我也需要它来处理以下代码：

$("#color").data("kendoDropDownList").value("grey");

(function() 
  var data = [
    text: "Black",
    value: "Black"
  , 
    text: "Orange",
    value: "Orange"
  , 
    text: "Grey",
    value: "Grey"
  ];

  // create DropDownList from input html element
  $("#color").kendoDropDownList(
    dataTextField: "text",
    dataValueField: "value",
    dataSource: data,
    index: 0
  );

  var color = $("#color").data("kendoDropDownList");
  color.value("Grey");
)();

<link href="https://kendo.cdn.telerik.com/2016.2.504/styles/kendo.common.min.css" rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2016.2.504/styles/kendo.default.min.css" rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2016.2.504/styles/kendo.all.min.css" rel="stylesheet" />
<script src="https://kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min.js"></script>

<input id="color" value="1" style="width: 100%;" />

请查看小提琴以更好地理解：https://jsfiddle.net/Hd47F/329/

【参考方案1】：

查看文档，这并不像您期望的那样工作是有道理的。您正在尝试设置值，而不是过滤下拉列表。 ignoreCase 属性仅适用于过滤和设置值需要我所看到的完全大小写。

不要使用value() 来设置值，而是尝试使用search()，如下所示。

$("#color").kendoDropDownList(
    dataTextField: "text",
    dataValueField: "value",
    dataSource: data, // using your same data as above
    index: 0
  );

var color = $("#color").data("kendoDropDownList");
color.search("grey"); // This now works regardless of casing

您可以在此处查看我的示例：http://dojo.telerik.com/ewEyoC

【讨论】：

如果你把index带出去会怎样？

什么也没发生。它仍然需要确切的大小写。

@LonelyPlaneteer 很高兴听到。如果您认为已解决，请标记为答案。