Question

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

创建搜索

Ex：Apple％Red

我怎么能这样做？

Answer 1

尽管我在autocomplete的文档中找不到任何引用，并且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"]
  }
});

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

$("#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 AutoComple中使用通配符查找项目

1 个答案: