ComboBox Filtering with Diacritic Accents

RELATED TO:

AUTHOR: Eyup Yusein

DATE POSTED: January 22, 2019

DESCRIPTION

Combo Diacritic Filtering
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>

More Resources

  • Forums

    Find answers to thousands of questions or reach out to our active community.

  • Demos

    Browse 1,200+ demos with source code covering basic and advanced scenarios.

  • Sample Applications

    Learn how to integrate the controls in real-world examples.

  • Feedback Portal

    Vote and follow the features you want to see added to Telerik UI for ASP.NET AJAX.

  • User Voice

    Get answers directly from the people who build the product.

  • Documentation

    Benefit from detailed help articles and API references for all controls.

  • Knowledge Base

    Learn how to achieve common scenarios from a multitude of tutorials and working examples.

  • Code Library

    Browse sample projects submitted by Telerik staff and community members.

  • Blog

    Stay up-to-date with the latest functionality, how-to articles and industry trends.

  • Release History

    Up-to-date release notes for all new features and improvements.