Underline Matched Searches in the ComboBox
Environment
| Product | Progress® Kendo UI® ComboBox for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I underline a matched input-field search in a Kendo UI ComboBox?
Solution
The following example demonstrates how to achieve the desired scenario.
<input id="fabric" placeholder="Select fabric..." />
<script>
function formatValue(value, text) {
var textMatcher = new RegExp(text, "ig");
return value.replace(textMatcher, function(match) {
return "<u>" + match + "</u>";
});
}
$(document).ready(function() {
// create ComboBox from input HTML element
var combo = $("#fabric").kendoComboBox({
dataTextField: "text",
dataValueField: "value",
dataSource: [
{ text: "Cotton", value: "1" },
{ text: "Polyester", value: "2" },
{ text: "Cotton/Polyester", value: "3" },
{ text: "Rib Knit", value: "4" }
],
filter: "contains",
suggest: true
}).data("kendoComboBox");
combo.setOptions({
template: $.proxy(kendo.template("#= formatValue(text, this.text()) #"), combo)
});
});
</script>