Estoy implementando una búsqueda (filtro) con los elementos de una tabla, todo funciona muy bien, excepto cuando el usuario utiliza búsquedas sin acentos.
Por ejemplo, en la tabla existen "Luis Perez", "Juan Pérez" y "Pedro Pèrez"
Si el usuario quisiera ver todos los "Perez" y lo escribe tal cual, la búsqueda arrojaría únicamente el apellido sin tilde (Luis), ocultando los demás que están acentuados.
Cómo logro que la búsqueda ignore los acentos?
Estoy utilizando el tutorial de w3schools.com
Este es el código:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
#myInput {
background-image: url('https://www.w3schools.com/css/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}
#myTable th, #myTable td {
text-align: left;
padding: 12px;
}
#myTable tr {
border-bottom: 1px solid #ddd;
}
#myTable tr.header, #myTable tr:hover {
background-color: #f1f1f1;
}
</style>
</head>
<body>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Buscar..." title="Type in a name">
<table id="myTable">
<tr class="header">
<th style="width:60%;">Name</th>
<th style="width:40%;">Country</th>
</tr>
<tr>
<td>Luis Perez</td>
<td>Germany</td>
</tr>
<tr>
<td>Juan Pérez</td>
<td>Sweden</td>
</tr>
<tr>
<td>Pedro Pèrez</td>
<td>UK</td>
</tr>
</table>
<script>
function myFunction() {
var input, filter, table, tr, td, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
</body>
</html>