Use Subscript Indicators in the ComboBox
Environment
Product | Progress® Kendo UI® ComboBox for jQuery |
Description
How can I use subscript indicators in the ComboBox widget?
Solution
- Provide a new jQuery instance method by extending the jQuery prototype (
$.fn
) object. - Check for
<sup>
tags in the input string, parse the group content, and replace it with the corresponding subscript character. - Transform the input in the
change
event of the ComboBox.
<div id="example">
<input id="combobox" />
</div>
<script>
$(document).ready(function() {
$("#combobox").kendoComboBox({
dataTextField: "name",
dataValueField: "id",
template:"#= name#",
dataSource: [
{ id: 1, name: "TEST<sup>3</sup>" },
{ id: 1, name: "TEST<sup>™</sup>" }
],
change: function(e) {
this.input.superScript();
}
});
})
$.fn.superScript = function() {
var chars = '+−=()0123456789®™',
sup = '⁺⁻⁼⁽⁾⁰¹²³⁴⁵⁶⁷⁸⁹®™';
return this.each(function() {
this.value = this.value.replace(/<sup[^>]*>(.*?)<\/sup>/g, function(x) {
var str = '',
txt = $.trim($(x).unwrap().text());
for (var i=0; i<txt.length; i++) {
var n = chars.indexOf(txt[i]);
str += (n!=-1 ? sup[n] : txt[i]);
}
return str;
});
});
}
</script>