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", "é": "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

Moton

the variable normalized is not defined at the scope of the normalize function. I believe you mean to return the str variable in this function. – Platoon

Answer 1

Change your normalize function so that it returns the normalized string i.e.

var normalize = function (input) {
 $.each(charMap, function (unnormalizedChar, normalizedChar) {
    var regex = new RegExp(unnormalizedChar, 'gi');
    input = input.replace(regex, normalizedChar);
 });
 return input;
}

See this fiddle I wrote to see it working:

http://jsfiddle.net/Fresh/SL36H/

You can see the normalized string in the browser debug console. In my example "àààèèèùùù" is converted to "aaaeeeuuu".

Note that I've changed the function parameters so that they are more accurate (i.e. chars is incorrect, it should be char) and I've also rationalised the regular expression.

Throng

Answer 2

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ãáàâ]/gi, '[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!

Leoni

Answer 3

You can use String.prototype.normalize()

https://developer.mozilla.org/en-[US/docs/Web/JavaScript/Reference/Global_Objects/String/normalize][1]

var queryTokenizer = function(input) {
        input = input.normalize("NFD").replace(/[\u0300-\u036f]/g, "")
        return Bloodhound.tokenizers.whitespace(input);
};

Rink