javascriptの検索バーをデータベースから

Question

私のプロジェクトではPHPを使用できません。データベースを持つ検索バーについて私が見つけたのは、PHPまたはHTML（データベースなし）です。だからこそ私は立ち往生している。このコードでは、データベースにアクセスでき、自分のリストにあるすべてのアトリエを正しく表示します。しかし今、問題はそれらの情報につながる検索バーを作るためにどうすればいいのですか？ （私はそれが名前（ateliers.nom）またはすべてだけを検索するかどうか気にしない） あなたは私を助けることを願っています！

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