0

我正在将 Kendo 与 JQuery 一起使用，并且我需要使用通配符创建搜索

例如：苹果%红

我该怎么做？

4

1 回答 1

1

尽管我在自动完成的文档中找不到对它的任何引用，并且它说过滤器需要是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 by.*并执行以下操作：

$("#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" />

于 2018-05-04T11:27:16.240 回答