Actualización página equipos

app/Views/pages/equipos.php

@@ -7,14 +7,13 @@
 
 
 <div class="target">
 <div class="target">
     <div class="text-center">
     <div class="text-center">
-        <input type="search" name="equipos" placeholder="Introduce el nombre del equipo" >
-        <input type ="submit" value="Buscar">
+        <input type="search" id="busqueda_equipos" name="equipos" placeholder="Introduce el nombre del equipo" >
     </div></br>
     </div></br>
 </div>
 </div>
 
 
 <?php foreach($equipos as $equipo) {?>
 <?php foreach($equipos as $equipo) {?>
     <div class="col-md-3">
     <div class="col-md-3">
-        <div class="card" >
+        <div class="card equipo"  >
             <img class="card-img-top" src="<?= base_url("img/.".$equipo->Imagen )?>" weight="60" height="auto">
             <img class="card-img-top" src="<?= base_url("img/.".$equipo->Imagen )?>" weight="60" height="auto">
             <div class="card-body">
             <div class="card-body">
                 <h4 class="text-md-center"><?php echo $equipo->Nombre ?></h4>
                 <h4 class="text-md-center"><?php echo $equipo->Nombre ?></h4>
@@ -23,3 +22,15 @@
     </div>
     </div>
 <?php }?>
 <?php }?>
 
 
+<script>
+    $(document).ready(function(){
+        $("#busqueda_equipos").keyup(function() {
+            var value = $(this).val().toLowerCase();
+            $(".equipo").filter(function() {
+                $(this).toggle($(this).children()[1].children[0].textContent.toLowerCase().includes(value.toLowerCase()))
+        });
+        
+        });
+    })
+</script>
+