javascript - Typeahead insensitive accent

Question

I tried this solution but I got this error :

Uncaught ReferenceError: normalized is not defined

Here is my code :

var charMap = {
    "à": "a", "a": "a", "é": "e", "è": "e", "ê": "e", "?": "e",
    "?": "i", "?": "i", "?": "o", "?": "o", "?": "u", "ù": "u"
};

var normalize = function(str) {
      $.each(charMap, function(chars, normalized) {
        var regex = new RegExp('[' + chars + ']', 'gi');
        str = str.replace(regex, normalized);    
      });
      return normalized;
    }

var queryTokenizer = function(q) {
    var normalized = normalize(q);
    return Bloodhound.tokenizers.whitespace(normalized);
};

var spectacles = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
    queryTokenizer: queryTokenizer,
    prefetch:'spectacles.json',
    limit:10,
  });
spectacles.initialize();

$('#search').typeahead({
  minLength: 1,
  hint:false,
  highlight: true
}, 
 {
  name: 'spectacles',
  displayKey: 'value',
  source: spectacles.ttAdapter()
}) ;

where is my error? Thanks

Answer 1

If you do not want to use Bloodhound, you can customize both 'highlighter' and 'matcher' methods from Typeahead object so they become accent insensitive.

If you want to make accent insensitive the default behavior of typeahead, you can include a new JavaScript file like below:

Step 1 - create a new file bootstrap3-typeahead-ci.min.js

// function for making a string accent insensitive
$.fn.typeahead.Constructor.prototype.normalize = function (str) {
    // escape chars
    var normalized = str.replace(/[-[]/{}()*+?.\^$|]/g, "\$&");

    // map equivalent chars
    normalized = normalized.replace(/[a?áàa]/gi, '[a?áàa]');
    normalized = normalized.replace(/[e?éèê]/gi, '[e?éèê]');
    normalized = normalized.replace(/[i?íì?]/gi, '[i?íì?]');
    normalized = normalized.replace(/[o?óò?]/gi, '[o?óò?]');
    normalized = normalized.replace(/[u?úù?]/gi, '[u?úù?]');
    normalized = normalized.replace(/[c?]/gi, '[c?]');

    // convert string to a regular expression
    // with case insensitive mode
    normalized = new RegExp(normalized, 'gi');

    // return regular expresion
    return normalized;
}

// change 'matcher' method so it became accent insensitive
$.fn.typeahead.Constructor.prototype.matcher = function (item) {

    // get item to be evaluated
    var source = this.displayText(item);

    // make search value case insensitive
    var normalized = this.normalize(this.query);

    // search for normalized value
    return source.match(normalized);
}

// change 'highlighter' method so it became accent insensitive
$.fn.typeahead.Constructor.prototype.highlighter = function (item) {

    // get html output
    var source = this.displayText(item);

    // make search value case insensitive
    var normalized = this.normalize(this.query);

    // highlight normalized value in bold
    return source.replace(normalized, '<strong>$&</strong>');
}

Step 2 - add to your page after bootstrap3-typeahead.min.js

<script src="bootstrap3-typeahead.min.js"></script>
<script src="bootstrap3-typeahead-ci.min.js"></script>

Of course you must be aware that since you are replacing both methods you should monitor if new features released in typeahead won't be reflected in your customized methods. However, I think this a lightweight and quick solution.

PS.: this is my first contribution to Stack Overflow hope you enjoy it!