How to find item using wildcard in Kendo AutoComple

Question

I am using Kendo with JQuery, And I need to create a search with wildcard

Ex: Apple%Red

How I can I do this?

Answer 1

Despite that I cannot find any reference to it in the documentation of autocomplete and it says filter needs to be String you can define it as a function that receives two parameters, the item to compare with and the value of the input field.

Now, the question is that given that you use % as a wildcard, makes me think that you should be using a server-side filtering but given that you ask for a JavaScript or jQuery implementation makes me think you ask for a browser implementation.

If your users can enter the wildcards using JavaScript regular expression syntax, you can simply do:

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

But if you want them to use % as wildcard for any character you can internally replace if by .* and do something like:

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

NOTE: Important to note that by default autocomplete is case insensitive but you can control it using ignoreCase

Following a code snippet. Try entering t and 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" />