Hướng dẫn how to connect search bar with database javascript - cách kết nối thanh tìm kiếm với javascript cơ sở dữ liệu

Đối với dự án của tôi, tôi không thể sử dụng PHP. Tất cả những gì tôi tìm thấy về thanh tìm kiếm với cơ sở dữ liệu nằm trong PHP hoặc trong HTML (không có cơ sở dữ liệu). Đó là lý do tại sao tôi bị mắc kẹt. Với mã này, tôi có quyền truy cập vào cơ sở dữ liệu của mình và nó hiển thị chính xác tất cả các atelier mà tôi có trong danh sách của mình. Nhưng bây giờ vấn đề là tôi nên làm như thế nào để tạo một thanh tìm kiếm kết nối với những thông tin đó? (Tôi không quan tâm nếu nó chỉ tìm kiếm tên (ateliers.nom) hoặc tất cả) hy vọng bạn có thể giúp tôi!

        

    

        
Atelier
        
Nombres d'inscrits
        
Lieu
        
Chef
        
Date
        
Places disponibles
    
    

            

            

            

            

            

            

            
">Afficher
            
">Editer
        
    

Dferenc

7.76712 Huy hiệu vàng40 Huy hiệu bạc46 Huy hiệu đồng12 gold badges40 silver badges46 bronze badges

Đã hỏi ngày 7 tháng 6 năm 2017 lúc 12:15Jun 7, 2017 at 12:15

2

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

 


  

    
Name
    
Country
  
  

    
Alfreds Futterkiste
    
Germany
  
  

    
Berglunds snabbkop
    
Sweden
  
  

    
Island Trading
    
UK
  
  

    
Koniglich Essen
    
Germany
  
 

Đã trả lời ngày 7 tháng 6 năm 2017 lúc 12:32Jun 7, 2017 at 12:32

Ahmed Ginaniahmed GinaniAhmed Ginani

6.4442 Huy hiệu vàng14 Huy hiệu bạc33 Huy hiệu đồng2 gold badges14 silver badges33 bronze badges

4

Làm thế nào để tôi có được thanh tìm kiếm hoạt động trong JavaScript?

Tôi có thể sử dụng JavaScript với cơ sở dữ liệu không?

Làm thế nào có thể tạo hộp tìm kiếm trong HTML với cơ sở dữ liệu?

Làm cách nào để làm cho thanh tìm kiếm của tôi hoạt động?