javascript - remote - typeahead suggestion
JavaScript Typeahead Autocompletar coincidir acentos y tildes Problema (1)
He escrito una solución en jsFiddle a continuación:
http://jsfiddle.net/Fresh/F3hG9/
La parte clave de la solución es normalizar el nombre utilizado para buscar e incluir también el nombre original que se utilizará para mostrar; Puedes ver esto en la definición de "local" a continuación:
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
};
})
});
Es la función normailze (que se muestra a continuación) que reemplaza con caracteres "extranjeros" con alternativas occidentales:
var normalize = function (input) {
$.each(charMap, function (unnormalizedChar, normalizedChar) {
var regex = new RegExp(unnormalizedChar, ''gi'');
input = input.replace(regex, normalizedChar);
});
return input;
};
He omitido charMap (que determina a qué personaje occidental se asigna el personaje extranjero) por brevedad; puedes encontrar la lista en el Fiddle.
Estoy usando la biblioteca jQuery de Typeahead , pero cuando un usuario escribe una vocal como e también debe coincidir con voces extranjeras, como é , ë , è .
Match n con ñ también.
Este es mi código:
<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>
¿Cómo puedo conseguir esto?
¡Gracias!