Home / Questions / 195813
Accepted
Jheyman Mejia
Asked: 2020-09-12 08:30:21 +0800 CST 2020-09-12 08:30:21 +0800 CST

How to ignore accents in search/filter using javascript?

  • 772

I am implementing a search (filter) with the elements of a table, everything works fine, except when the user uses searches without accents.

For example, in the table there are "Luis Perez", "Juan Pérez" and "Pedro Pèrez"

If the user wants to see all the "Perez" and writes it as it is, the search would return only the surname without an accent (Luis), hiding the others that are accented.

How do I get search to ignore accents?

I am using the tutorial from w3schools.com

This is the code:

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

javascript

2 Answers

  1. Best Answer

    You could implement a function that removes accents (both on user input and table values, this to be able to use indexOf):

    var accent_map = {'á':'a', 'é':'e', 'è':'e', 'í':'i','ó':'o','ú':'u','Á':'a', 'É':'e', 'è':'e', 'Í':'i','Ó':'o','Ú':'u'};
function accent_fold (s) {
  if (!s) { return ''; }
  var ret = '';
  for (var i = 0; i < s.length; i++) {
    ret += accent_map[s.charAt(i)] || s.charAt(i);
  }
  return ret;
};

    In this way, the input is left without accents, and it is compared with the values ​​of the table, also without accents. The example would look like this:

    <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>
var accent_map = {'á':'a', 'é':'e', 'è':'e', 'í':'i','ó':'o','ú':'u','Á':'a', 'É':'e', 'è':'e', 'Í':'i','Ó':'o','Ú':'u'};
function accent_fold (s) {
  if (!s) { return ''; }
  var ret = '';
  for (var i = 0; i < s.length; i++) {
    ret += accent_map[s.charAt(i)] || s.charAt(i);
  }
  return ret;
};

function myFunction() {
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  filter = accent_fold(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 (accent_fold(td.innerHTML).toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}
</script>

</body>
</html>

    You can see the full tutorial here, it's called 'accent folding':

    https://alistapart.com/article/accent-folding-for-auto-complete

    • 6

  2. I had a similar problem and I think there is an easier way:

    You could try replacing

    if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {

    With something similar to this:

    if (td.innerHTML.normalize("NFD").replace(/[\u0300-\u036f]/g, '').toUpperCase().indexOf(filter) > -1) {

    What it will do is:

    1. normalize("NFD") separates accents from accented characters
    2. .replace(/[\u0300-\u036f]/g, '') removes them (replaces them with '')

    Credit / reference links:

    • 5