jQuery typeahead.js 和重音符号

Question

我正在使用 jQuery typeahead 插件自动补全法语和英语的国家/地区。

即使使用重音，它也能正常工作，因为国家/地区是以两种语言应有的方式获取的。 唯一的问题是，一旦用户手动输入重音符号，输入字段就会停止显示提示。

最终，这就是当用户输入单词时它的演变方式：

Algérie 好的）

Algérie（好的）

阿尔格埃里（好的）

Algé（不好）

阿尔及尔（不好）

阿尔及利亚（不好）

阿尔及利亚

请记住，输入字段下方的框（显示与输入匹配的所有单词）将按照预期继续显示“Algérie”，即使不再显示提示也是如此。

所以，MySQL 似乎没有任何问题，因为数据被清楚地获取并且重音也被识别，但是一旦用户输入重音，提示就不起作用（但在输入此重音之前，提示将起作用）显示口音，这不是问题）。

对此我能做什么？

这就是我对插件的称呼：

$('.filterbox_location').typeahead({
    remote : 'library/other/filter_validate/autocomplete_location.php?query=%QUERY',
    minLength: 1
});

我不显示 php 脚本，因为它不相关，因为很明显数据已被获取。当 typeahead 处理输入时，问题就出现了。

如果需要的话，我当然会给出php代码。

Answer 1

看看最近的解决方案：https://github.com/twitter/typeahead.js/issues/271

问候！

Answer 2

尝试一下

// modulo-1
// ----------
var charMap = {
    "à": "a",
    "á": "a",
    "â": "a",
    "é": "e",
    "è": "e",
    "ê": "e",
    "ë": "e",
    "É": "e",
    "ï": "i",
    "î": "i",
    "ô": "o",
    "ö": "o",
    "û": "u",
    "ù": "u",
    "ü": "u",
    "ñ": "n"    
};

var names = ["Algérie", "Panamá","México"];

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

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

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

nombres.initialize();

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

html {
  overflow-y: scroll;
  *overflow-x: hidden;
}

.container {
  max-width: 750px;
  margin: 0 auto;
  text-align: center;
}

.tt-menu,
.gist {
  text-align: left;
}

/* base styles */
/* ----------- */

html {
  font: normal normal normal 18px/1.2 "Helvetica Neue", Roboto, "Segoe UI", Calibri, sans-serif;
  color: #292f33;
}


a {
  color: #03739c;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.table-of-contents li {
  display: inline-block;
  *display: inline;
  zoom: 1;
}

.table-of-contents li a {
  font-size: 16px;
  color: #999;
}

p + p {
  margin: 30px 0 0 0;
}

/* site theme */
/* ---------- */

.title {
  margin: 20px 0 0 0;
  font-size: 64px;
}

.example {
  padding: 30px 0;
}

.example-name {
  margin: 20px 0;
  font-size: 32px;
}

.demo {
  position: relative;
  *z-index: 1;
  margin: 50px 0;
}

.typeahead,
.tt-query,
.tt-hint {
  width: 396px;
  height: 30px;
  padding: 8px 12px;
  font-size: 24px;
  line-height: 30px;
  border: 2px solid #ccc;
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
  outline: none;
}

.typeahead {
  background-color: #fff;
}

.typeahead:focus {
  border: 2px solid #0097cf;
}

.tt-query {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
  color: #999
}

.tt-menu {
  width: 422px;
  margin: 12px 0;
  padding: 8px 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
          box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.tt-suggestion {
  padding: 3px 20px;
  font-size: 18px;
  line-height: 24px;
}

.tt-suggestion:hover {
  cursor: pointer;
  color: #fff;
  background-color: #0097cf;
}

.tt-suggestion.tt-cursor {
  color: #fff;
  background-color: #0097cf;

}

.tt-suggestion p {
  margin: 0;
}

.gist {
  font-size: 14px;
}

/* example specific styles */
/* ----------------------- */

#custom-templates .empty-message {
  padding: 5px 10px;
 text-align: center;
}

#multiple-datasets .league-name {
  margin: 0 20px 5px 20px;
  padding: 3px 0;
  border-bottom: 1px solid #ccc;
}

#scrollable-dropdown-menu .tt-menu {
  max-height: 150px;
  overflow-y: auto;
}

#rtl-support .tt-menu {
  text-align: right;
}

<p>Search for: "Algérie", "Panamá" or "México"</p>
<input id="search" class="typeahead" type="text">

<script  type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script>
<script type="text/javascript" src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>