New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

ComboBox Filtering with Diacritic Accents

DESCRIPTION

Usually you can keep various records in databases which can include letters and symbols from different cultures. Here are some of the diacritics of the Latin letter e for instance: éèëê.

For convenience to your users, you can choose to enable accent-insensitive filtering for the RadComboBox component.

SOLUTION

This is a definition of a sample RadComboBox including item text with diacritic:

<telerik:RadComboBox ID="RadComboBox1" runat="server" Filter="Contains"
    EmptyMessage="Select a value">
    <Items>
        <telerik:RadComboBoxItem Text="Luís" Value="Luís" />
        <telerik:RadComboBoxItem Text="John" Value="John" />
        <telerik:RadComboBoxItem Text="Luis" Value="Luis" />
        <telerik:RadComboBoxItem Text="Doe" Value="Doe" />
        <telerik:RadComboBoxItem Text="Lûis" Value="Lûis" />
        <telerik:RadComboBoxItem Text="Müller" Value="Müller" />
    </Items>
</telerik:RadComboBox>

And you can add the following override JavaScript logic to your page to achieve this filtering requirement:

<script>
    var $ = $telerik.$, $T = Telerik.Web.UI, $I = $T.RadComboBoxItem;

    Telerik.Web.UI.RadComboBoxItem.prototype._highlightOrg =
        Telerik.Web.UI.RadComboBoxItem.prototype._highlight;
    Telerik.Web.UI.RadComboBoxItem.prototype._highlight = function (regex, element) {
        var text = $(element).text().trim();
        $(element).text(replaceDiacritics(text));
        //$(element).text(text.normalize('NFD').replace(/[\u0300-\u036f]/g, "")); - not supported in IE

        var matchIsFound = this._highlightOrg(regex, element);
        var highlightedText = $(element).html().trim();

        var highlightStartPosition = highlightedText.indexOf("<em>");
        text = [text.slice(0, highlightStartPosition), "<em>", text.slice(highlightStartPosition)].join('');

        var highlightEndPosition = highlightedText.indexOf("</em>");
        text = [text.slice(0, highlightEndPosition), "</em>", text.slice(highlightEndPosition)].join('');

        $(element).html(text);
        return matchIsFound;
    }

    Telerik.Web.UI.RadComboBoxItem.prototype.highlightText = function (filter, text) {
        this.clearEmTags();

        if (text === "")
            return true;

        var escapedText = $I._regExEscape(replaceDiacritics(text)),
            regex = null;

        if (filter == $T.RadComboBoxFilter.StartsWith)
            regex = new RegExp("^\\s*" + escapedText, "im");
        else if (filter == $T.RadComboBoxFilter.Contains)
            regex = new RegExp(escapedText, "gim");

        var matchIsFound = this._highlight(regex, this.get_element());

        return matchIsFound;
    }

    function replaceDiacritics(str) {
        var diacritics = [
          { char: 'A', base: /[\300-\306]/g },
          { char: 'a', base: /[\340-\346]/g },
          { char: 'E', base: /[\310-\313]/g },
          { char: 'e', base: /[\350-\353]/g },
          { char: 'I', base: /[\314-\317]/g },
          { char: 'i', base: /[\354-\357]/g },
          { char: 'O', base: /[\322-\330]/g },
          { char: 'o', base: /[\362-\370]/g },
          { char: 'U', base: /[\331-\334]/g },
          { char: 'u', base: /[\371-\374]/g },
          { char: 'N', base: /[\321]/g },
          { char: 'n', base: /[\361]/g },
          { char: 'C', base: /[\307]/g },
          { char: 'c', base: /[\347]/g }
        ]

        diacritics.forEach(function (letter) {
            str = str.replace(letter.base, letter.char);
        });

        return str;
    };
</script>
In this article
Not finding the help you need? Improve this article