Table des matières

Il est très pratique de filter les éléments d’un tableau pour effectuer une recherche. Il suffit de taper les premières lettres du mot pour l’afficher. Vous trouverez un exemple sur ce site dans l’onglet Archives.

Utilisons le javascript

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

Le HTML

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Rechercher..." title="Taper le début d'un mot">

<table id="myTable">
   {{range where .Site.RegularPages "Section" "post"}}
  <tr class="item ">
    <td><a href="{{.Permalink}}">{{.Title}}</a></td>
    <td> {{ .Date.Day }} {{ index $.Site.Data.mois (printf "%d" .Date.Month) }} {{ .Date.Year }} </td>
  </tr>
  {{end}}
</table>

Le CSS

#myInput {
  width: 100%; 
  font-size: 1.1rem;
  padding: 12px 20px 12px 20px; 
  border: 1px solid #ddd; 
  margin-bottom: 1rem;
  margin-top: -1rem;
}

#myTable {
  border-collapse: collapse;
  width: 100%; 
  border: 1px solid #ddd; 
  font-size: 1.1rem;
}

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

Vous pouvez vérifier l’efficacité du script dans l’onglet Archives du site.