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

1. Provide a new jQuery instance method by extending the jQuery prototype ($.fn) object.
2. Check for <sup> tags in the input string, parse the group content, and replace it with the corresponding subscript character.
3. 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>

See Also

• API Reference of the ComboBox