New to Kendo UI for jQuery? Start a free 30-day trial
Highlight Matched Values in AutoComplete
Environment
| Product | Progress® Kendo UI® AutoComplete for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I highlight the matched values from the AutoComplete suggestions based on the value entered by the user?
Solution
The following example demonstrates how to achieve the desired scenario.
<div id="example">
<div id="shipping">
<label for="countries" class="info">Choose shipping countries:</label>
<input id="countries" />
<div class="hint">Start typing the name of a European country</div>
</div>
<script>
$(document).ready(function () {
var data = [
"Albania",
"Andorra",
"Armenia",
"Austria",
"Azerbaijan",
"Belarus",
"Belgium",
"Bosnia & Herzegovina",
"Bulgaria",
"Croatia",
"Cyprus",
"Czech Republic",
"Denmark",
"Estonia",
"Finland",
"France",
"Georgia",
"Germany",
"Greece",
"Hungary",
"Iceland",
"Ireland",
"Italy",
"Kosovo",
"Latvia",
"Liechtenstein",
"Lithuania",
"Luxembourg",
"Macedonia",
"Malta",
"Moldova",
"Monaco",
"Montenegro",
"Netherlands",
"Norway",
"Poland",
"Portugal",
"Romania",
"Russia",
"San Marino",
"Serbia",
"Slovakia",
"Slovenia",
"Spain",
"Sweden",
"Switzerland",
"Turkey",
"Ukraine",
"United Kingdom",
"Vatican City"
];
// Create the UI of the AutoComplete.
$("#countries").kendoAutoComplete({
dataSource: data,
filter: "startswith",
placeholder: "Select country...",
separator: ", ",
template: $.proxy(kendo.template("#= formatValue(data, this.val()) #"), $("#countries"))
});
});
function formatValue(itemText, text) {
var textMatcher = new RegExp(text, "ig");
return itemText.replace(textMatcher, function(match) {
return "<strong>" + match + "</strong>";
});
}
</script>
<style scoped>
.info {
display: block;
line-height: 22px;
padding: 0 5px 5px 0;
color: #36558e;
}
#shipping {
width: 482px;
height: 152px;
padding: 110px 0 0 30px;
background: url('https://demos.telerik.com/kendo-ui/content/web/autocomplete/shipping.png') transparent no-repeat 0 0;
margin: 100px auto;
}
.k-autocomplete
{
width: 250px;
vertical-align: middle;
}
.hint {
line-height: 22px;
color: #aaa;
font-style: italic;
font-size: .9em;
color: #7496d4;
}
</style>
</div>