I would like to be able to improve an internal search engine so that I can read words with accents of a database without needing to write the accents in the search engine. I have another search engine that you can search for words without accents. For example: I look for my name "Rubén". In the database it appears as "Ruben" but in the search engine I will write "ruben". I hope you can help me.
I pass the search code I want to improve:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Buscador interno</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
#result {
position: absolute;
width: 100%;
max-width:870px;
cursor: pointer;
overflow-y: auto;
max-height: 400px;
box-sizing: border-box;
z-index: 1001;
}
.link-class:hover{
background-color:#f1f1f1;
}
</style>
</head>
<body>
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<div class="container" style="width:900px;">
<div align="center">
<input type="text" name="search" id="search" placeholder="Buscar ciudad" class="form-control" />
</div>
<ul class="list-group" id="result"></ul>
<br />
</div>
</body>
</html>
<script>
$(document).ready(function(){
$.ajaxSetup({ cache: false });
$('#search').keyup(function(){
$('#result').html('');
$('#state').val('');
var searchField = $('#search').val();
var expression = new RegExp(searchField, "i");
$.getJSON('js/data.json', function(data) {
$.each(data, function(key, value){
if (value.ciudad.search(expression) != -1 )
{
$('#result').append('<li class="list-group-item link-class"><img src="'+value.image+'" height="40" width="40" class="img-thumbnail" /> '+value.ciudad+' | <span class="text-muted">'+value.provincia+'</span></li>');
}
});
});
});
$('#result').on('click', 'li', function() {
var click_text = $(this).text().split('|');
$('#search').val($.trim(click_text[0]));
$("#result").html('');
});
});
</script>
JSON:
[
{
"ciudad":"Ruben",
"image": "https://www.madridiario.es/fotos/1/Los_pueblos_mA_s_bonitos_de_Madrid.jpg",
"provincia":"MADRID"
},
{
"ciudad":"Rubn",
"image": "https://www.madridiario.es/fotos/1/Los_pueblos_mA_s_bonitos_de_Madrid.jpg",
"provincia":"MADRID"
}
]
I pass the code of the search that works without writing the accent in the search:
HTML:
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery-ui.css">
<script src="js/jquery-1.12.4.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/autocomplete-ok.js"></script>
</head>
<body>
<div>
<form>
<input id="developer">
</form>
</div>
<div>
<form>
<input id="developer2">
</form>
</div>
</body>
</html>
$ (function () { var names = ["Jörn", "Scott", "John2"];
var accentMap = {
"á": "a",
"ö": "o"
};
var normalize = function( term ) {
var ret = "";
for ( var i = 0; i < term.length; i++ ) {
ret += accentMap[ term.charAt(i) ] || term.charAt(i);
}
return ret;
};
$( "#developer" ).autocomplete({
source: function( request, response ) {
var matcher = new RegExp( $.ui.autocomplete.escapeRegex( request.term ), "i" );
response( $.grep( names, function( value ) {
value = value.label || value.value || value;
return matcher.test( value ) || matcher.test( normalize( value ) );
}) );
}
});
} );
$( function() {
var names = [ "1", "2 ", "3" ];
var accentMap = {
"á": "a",
"ö": "o"
};
var normalize = function( term ) {
var ret = "";
for ( var i = 0; i < term.length; i++ ) {
ret += accentMap[ term.charAt(i) ] || term.charAt(i);
}
return ret;
};
$( "#developer2" ).autocomplete({
source: function( request, response ) {
var matcher = new RegExp( $.ui.autocomplete.escapeRegex( request.term ), "i" );
response( $.grep( names, function( value ) {
value = value.label || value.value || value;
return matcher.test( value ) || matcher.test( normalize( value ) );
}) );
}
});
} );
The function:
$ (function () { var names = ["Jörn", "Scott", "John2"];
var accentMap = {
"á": "a",
"ö": "o"
};
var normalize = function( term ) {
var ret = "";
for ( var i = 0; i < term.length; i++ ) {
ret += accentMap[ term.charAt(i) ] || term.charAt(i);
}
return ret;
};
$( "#developer" ).autocomplete({
source: function( request, response ) {
var matcher = new RegExp( $.ui.autocomplete.escapeRegex( request.term ), "i" );
response( $.grep( names, function( value ) {
value = value.label || value.value || value;
return matcher.test( value ) || matcher.test( normalize( value ) );
}) );
}
});
} );
$( function() {
var names = [ "1", "2 ", "3" ];
var accentMap = {
"á": "a",
"ö": "o"
};
var normalize = function( term ) {
var ret = "";
for ( var i = 0; i < term.length; i++ ) {
ret += accentMap[ term.charAt(i) ] || term.charAt(i);
}
return ret;
};
$( "#developer2" ).autocomplete({
source: function( request, response ) {
var matcher = new RegExp( $.ui.autocomplete.escapeRegex( request.term ), "i" );
response( $.grep( names, function( value ) {
value = value.label || value.value || value;
return matcher.test( value ) || matcher.test( normalize( value ) );
}) );
}
});
} );