<script src="../server.js"></script><h1 class="text-center">Videos</h1> <div class="row"> <center><h1>Videos</h1></center> </div> <input id="videoFilter" class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <br> <div class="row"> {for video in private} <div class="col-md-3 videoElement p-2"> <div class="card"> <div class="card-header"> <h4>{video.name}</h4> </div> <div class="card-body"> <a href="/watch?v={video.name}" class="" role="button" aria-pressed="true"> <img src="/icon?v={video.name}" alt="Icon for {video.name}" width=100%/> </a> </div> </div> </div> {/for} {for video in public} <div class="col-md-3 videoElement p-2"> <div class="card"> <div class="card-header"> <h4>{video.name}</h4> </div> <div class="card-body"> <a href="/watch?v={video.name}" class="" role="button" aria-pressed="true"> <img src="/icon?v={video.name}" alt="Icon for {video.name}" width=100%/> </a> </div> </div> </div> {/for} </div> <script> function filterTable() { var input = $("input#videoFilter").val().toLowerCase(); $(".videoElement").css({"display": "none"}); $(".videoElement").each(function(index) { if($(this).text().toLowerCase().includes(input)) { $(this).toggle(true); //$(this).css({"display": "none"}); } }); if(input.toString().split(" ").join("") === "") { $(".videoElement").toggle(true); } } $(document).ready(function() { $("input#videoFilter").bind("keyup", filterTable); }); </script>