How to find item using wildcard in Kendo AutoComple - kendo-ui

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" />