JavaScript Typeahead 自动完成匹配重音符号和波浪线问题答案

【问题标题】：JavaScript Typeahead Autocomplete match accents and tildes IssueJavaScript Typeahead 自动完成匹配重音符号和波浪线问题
【发布时间】：2014-03-30 22:31:48
【问题描述】：

我正在使用Typeahead jQuery 库，但是当用户输入像e 这样的人声时，它也应该匹配外国人声，例如é、ë、è。

将n 也与ñ 匹配。

这是我的代码：

<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>

我怎样才能做到这一点？

谢谢！

【问题讨论】：

在这里查看答案stackoverflow.com/a/22493881/203371
@Fresh，你能重新检查我的问题吗？我添加了更多代码。谢谢！
TypeError: input.replace 不是函数 input = input.replace(regex, normalizedChar);

标签： javascript jquery utf-8 autocomplete typeahead.js

【解决方案1】：

我在下面的jsFiddle中写了一个解决方案：

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

解决方案的关键部分是标准化用于搜索的名称，并包括将用于显示目的的原始名称；您可以在下面的“本地”定义中看到这一点：

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
        };
    })
});

这是 normailze 函数（如下所示），它用“外国”字符替换为西方替代品：

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

为简洁起见，我省略了 charMap（它决定了外来字符映射到哪个西方字符）；您可以在 Fiddle 中找到该列表。

【讨论】：

我有一个问题，我使用 typeahead 版本。 0.10.0 因为fastclick 会干扰 0.10.0 版本的较新版本，所以问题是当我“点击”建议时，它不会在输入时自动完成。不幸的是，您在 typeahead 0.10.0 版本中的脚本导致我出现此错误：Uncaught TypeError: Can not call method 'whitespace' of undefined :'( 知道如何解决这个问题吗？
如果您在小提琴中按照我的示例进行操作，请确保在您的网站中引用 typeahead.js 包（这包括 typeahead 和 Bloodhound 建议引擎）。还要确保“本地”函数使用“值”键值对传递回对象。
现在我使用 typeahead.bundle.js 但是当点击一个建议时，该建议不会在输入中自动完成。我该如何适应这个？：gist.github.com/olimortimer/6761771
由于你要适配的功能和这个问题没有真正的关系，你应该新建一个问题。