JavaScript Typeahead Autocomplete match accents and tildes Issue

Question

I'm using Typeahead jQuery library, but when a user types a vocal like e it should match foreign vocals too, like é, ë, è.

Match n with ñ too.

This is my code:

<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="typeahead.css">
    <script src="jquery-1.11.0.min.js"></script>
    <script src="typeahead.bundle.min.js"></script>
</head>
<body>
    <center>
        <div id="nombre">
            <input class="typeahead" type="text" placeholder="Nombre">
        </div>
    </center>
    <script>
        var charMap = {
            "à": "a", 
            "á": "a", 
            "ä": "a", 
            "è": "e", 
            "é": "e", 
            "ë": "e", 
            "ì": "i", 
            "í": "i",
            "ï": "i",
            "ò": "o",
            "ó": "o",
            "ö": "o",
            "ù": "u",
            "ú": "u",
            "ü": "u",
            "ñ": "n"};
        var normalize = function (input) {
            $.each(charMap, function (unnormalizedChar, normalizedChar) {
                var regex = new RegExp(unnormalizedChar, 'gi');
                input = input.replace(regex, normalizedChar);
            });
            return input;
        }
        var substringMatcher = function(strs) {
        return function findMatches(q, cb) {
            var matches, substringRegex;
            matches = [];
            substrRegex = new RegExp(q, "i");
            $.each(strs, function(i, str) {
              if (substrRegex.test(str)) {
                matches.push({ value: str });
              }
            });
            cb(matches);
          };
        };
        var nombres = ["Sánchez", "Árbol", "Müller", "Ératio", "Niño"];
        $("#nombre .typeahead").typeahead({
          hint: true,
          highlight: true,
          minLength: 1
        },
        {
          name: "nombres",
          displayKey: "value",
          source: substringMatcher(nombres)
        });
    </script>
</body>

How can I achieve this?

Thanks!

See the answer here http://stackoverflow.com/a/22493881/203371 — Ben Smith, Mar 30 '14 at 22:45
@Fresh, do you can re-check my question, please? I have added more code. Thanks! — candlejack, Mar 30 '14 at 23:18
TypeError: input.replace is not a function input = input.replace(regex, normalizedChar); — candlejack, Mar 30 '14 at 23:21

Ben Smith · Accepted Answer · 2015-01-27T12:03:30.167

6

I've written a solution in the jsFiddle below:

http://jsfiddle.net/Fresh/F3hG9/

The key part of the solution is to normalize the name used for searching and to also include the original name which will be used for display purposes; you can see this in the definition of "local" below:

var nombres = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
    queryTokenizer: queryTokenizer,
    local: $.map(names, function (name) {
        // Normalize the name - use this for searching
        var normalized = normalize(name);
        return {
            value: normalized,
            // Include the original name - use this for display purposes
            displayValue: name
        };
    })
});

It is the normailze function (shown below) which replaces with "foreign" characters with Western alternatives:

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

I have omitted charMap (which determines what western character the foreign character maps to) for brevity; you can find the list in the Fiddle.

edited Jan 27 '15 at 12:03

answered Mar 31 '14 at 21:38

Ben Smith

19,589
6
65
93

1

I have an issue, I use typeahead ver. *0.10.0* because [fastclick](https://github.com/ftlabs/fastclick) make interference with the newer versions of 0.10.0 version, the issue is that when I "tap" on a suggestion, it does not autocomplete on input. Unfortunately, your script in typeahead 0.10.0 version cause me this error: `Uncaught TypeError: Can not call method 'whitespace' of undefined` :'( Have any idea how to solve this problem? – candlejack Apr 01 '14 at 04:54
1

If you are following my example in the fiddle, make sure you reference the typeahead.js bundle in your website (this includes typeahead and the bloodhound suggestion engine). Also ensure that the "local" function is passing back object with a "value" key-value pair. – Ben Smith Apr 01 '14 at 09:25
Now I use typeahead.bundle.js but when a tap a suggestion, the suggestion doesn't autocomplete in the input. How I can adapt this?:https://gist.github.com/olimortimer/6761771 – candlejack Apr 01 '14 at 14:31
1

As the functionality you want to adapt is not really related to this question, you should create a new question. – Ben Smith Apr 01 '14 at 21:03

JavaScript Typeahead Autocomplete match accents and tildes Issue

1 Answers1

Linked