Search bar in javascript from a database

Question

For my project I cannot use php. All I found about search bar with database are in php or in html (with no database). That's why I am stuck. With this code, I have access to my database and it does show correctly all the atelier that I have in my list. But now the problem is how should I do to make a search bar that connects with those informations? (I don't care if it searches only the name (ateliers.nom) or all) Hope you can help me!

<input type="text" id = "search" placeholder="search...">
<input type="submit" name = 'searchsubmit' value="Rechercher">
<table>
    <tr>
        <th>Atelier</th>
        <th>Nombres d'inscrits</th>
        <th>Lieu</th>
        <th>Chef</th>
        <th>Date</th>
        <th>Places disponibles</th>
    </tr>
    <c:forEach var="ateliers" items="${listAteliers}" varStatus="status">
        <tr>
            <th><c:out value="${ateliers.nom}" default="Empty"></c:out></th>
            <th><c:out value="${ateliers.nbinscrit}" default="Empty"></c:out></th>
            <th><c:out value="${ateliers.lieu}" default="Empty"></c:out></th>
            <th><c:out value="${ateliers.chef}"></c:out></th>
            <th><c:out value="${ateliers.date}" default="Empty"></c:out></th>
            <th><c:out value="${ateliers.place}" default="Empty"></c:out></th>
            <th><a href="<c:url value="./atelierdisplay/${listAteliers[status.index].id}"/>">Afficher</a></th>
            <th><a href="<c:url value="./atelieredit/${listAteliers[status.index].id}"/>">Editer</a></th>
        </tr>
    </c:forEach>
</table>

Answer 1

function myFunction() {
  // Declare variables
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");

  // Loop through all table rows, and hide those who don't match the search query
  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";
      }
    }
  }
}

#myInput {
    background-image: url('/css/searchicon.png'); /* Add a search icon to input */
    background-position: 10px 12px; /* Position the search icon */
    background-repeat: no-repeat; /* Do not repeat the icon image */
    width: 100%; /* Full-width */
    font-size: 16px; /* Increase font-size */
    padding: 12px 20px 12px 40px; /* Add some padding */
    border: 1px solid #ddd; /* Add a grey border */
    margin-bottom: 12px; /* Add some space below the input */
}

#myTable {
    border-collapse: collapse; /* Collapse borders */
    width: 100%; /* Full-width */
    border: 1px solid #ddd; /* Add a grey border */
    font-size: 18px; /* Increase font-size */
}

#myTable th, #myTable td {
    text-align: left; /* Left-align text */
    padding: 12px; /* Add padding */
}

#myTable tr {
    /* Add a bottom border to all table rows */
    border-bottom: 1px solid #ddd;
}

#myTable tr.header, #myTable tr:hover {
    /* Add a grey background color to the table header and on hover */
    background-color: #f1f1f1;
}

 <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">

<table id="myTable">
  <tr class="header">
    <th style="width:60%;">Name</th>
    <th style="width:40%;">Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbkop</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Koniglich Essen</td>
    <td>Germany</td>
  </tr>
</table>