Question

我需要在html表数据库中创建搜索功能。我正在从Firebase数据库中获取所有数据，并将其显示在Web上，我可以与我分享我的工作代码。我希望你能帮助我。非常感谢。我真的需要你们的帮助。您能提供一个代码来搜索我的Firebase数据库表中的项目并在搜索时显示它吗？

<html>
<head>
<title>Firebase Realtime Database Web</title>

<script src="https://www.gstatic.com/firebasejs/5.5.1/firebase.js"></script>
<script>
  var config = {
    apiKey: "AIzaSyBNqgJOUckyBfekVQAzIcIfTtqnT3Oah08",
    authDomain: "sad-police-app.firebaseapp.com",
    databaseURL: "https://sad-police-app.firebaseio.com",
    projectId: "sad-police-app",
    storageBucket: "sad-police-app.appspot.com",
    messagingSenderId: "24984489047"
  };
  firebase.initializeApp(config);
</script>
</head>
<body>


 <h3>Submited Info List</h3>

        <input type="text" name="search" value="" autocomplete="off" id="myinput" onkeyup="searchFunction()" placeholder="Search">
<table id="tbl_users_list" border="1">
   <tr>
   <th>Email Address</th>
   <th>Caption</th>
   <th>Location</th>
   <th>Time</th> 
   <th>Picture</th>
  </tr>
 </table>

 <script>


  var tblUsers = document.getElementById('tbl_users_list');
  var databaseRef = firebase.database().ref('PP3/');
  var rowIndex = 1;

  databaseRef.once('value', function(snapshot) {
    snapshot.forEach(function(childSnapshot) {
   var childKey = childSnapshot.key;
   var childData = childSnapshot.val();

   var row = tblUsers.insertRow(rowIndex);
   var email = row.insertCell(0);
   var caption = row.insertCell(1);
   var location = row.insertCell(2);
   var time = row.insertCell(3);
   var picture = row.insertCell(4);
   email.appendChild(document.createTextNode(childData.Email.replace(/\\/g, '').replace(/"/g, '')));
   caption.appendChild(document.createTextNode(childData.Caption.replace(/\\/g, '').replace(/"/g, '')));
   location.appendChild(document.createTextNode(childData.Location.replace(/\\/g, '').replace(/"/g, '')));
   time.appendChild(document.createTextNode(childData.Time.replace(/\\/g, '').replace(/"/g, '')));
   picture.appendChild(document.createTextNode(childData.Picture.replace(/\\/g, '').replace(/"/g, '')));
   rowIndex = rowIndex + 1;
});
  });
</script>


</body>
</html>

如何在html中创建搜索功能，搜索项来自firebase数据库

0 个答案: