如何在 Kendo 自动完成中使用通配符查找项目

Question

我正在使用 Kendo 和 JQuery，我需要使用通配符

创建一个搜索

例如：Apple%Red

我该怎么做？

Answer 1

尽管我在 autocomplete and it says filter 的文档中找不到任何对它的引用需要是 String 你可以将它定义为接收两个参数的 function 项目与输入字段的值进行比较。

现在的问题是，鉴于您使用 % 作为通配符，我认为您应该使用服务器端过滤，但鉴于您要求使用 JavaScript 或jQuery 实现让我觉得你要求浏览器实现。

如果您的用户可以使用 JavaScript 正则表达式语法输入通配符，您只需执行以下操作：

$("#autocomplete").kendoAutoComplete({
  filter: function(input, pattern) {
    var re = new RegExp(pattern, 'i');
    return re.test(input);
  },
  dataSource: {
    data: ["one", "two", "three"]
  }
});

但是如果您希望他们使用 % 作为任何字符的通配符，您可以在内部将 if 替换为 .* 并执行以下操作：

$("#autocomplete").kendoAutoComplete({
  filter: function(input, pattern) {
    pattern = pattern.replace('%', '.*');
    var re = new RegExp(pattern, 'i';
    return re.test(input);;
  },
  dataSource: {
    data: ["One", "Two", "Three"]
  }
});

注意：重要的是要注意，默认情况下自动完成不区分大小写，但您可以使用 ignoreCase

来控制它

跟随一段代码。尝试输入 t 和 t%e

var ignoreCase = true;
$("#autocomplete").kendoAutoComplete({
  ignoreCase: ignoreCase,
  filter: function(input, pattern) {
    pattern = pattern.replace('%', '.*');
    var re = new RegExp(pattern, ignoreCase ? 'i' : '');
    return re.test(input);
  },
  dataSource: {
    data: ["One", "Two", "Three"]
  }
});

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.silver.min.css" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script>

<input id="autocomplete" />

如何在 Kendo 自动完成中使用通配符查找项目

How to find item using wildcard in Kendo AutoComple

kendo-ui

kendo-autocomplete