2

Been working on a layout grid with cards with Bootstrap 4 for a calendar project, and after the original briefing it has been request that I need to add a search bar with a dynamic layout - one that reshuffles the card items after the search.

So far managed to complete the first part via JS - submit an input with filter for every grid item - however they don't automatically shuffle back after the search, leaving up empty spaces between the results. Here's the code:

<div id="pesquisa">
    <div class="container" >
        <div class="row">
            <h2 class="text-center">Descubra as melhores corridas de rua do país</h2>
            <input class="form-control" id="myInput" type="text" placeholder="Procure pela sua distância!">
        </div>
    </div>
</div>
<div id="eventos" ... /* inside this div is the whole code for the calendar */> 
</div>

<script>
    $(document).ready(function(){
      $("#myInput").on("keyup", function() {
        var value = $(this).val().toLowerCase();
        $("#eventos .card").filter(function() {
          $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });
      });
    });
</script>

..

Any tip for fixing this - even if it's another JS script and how to implement it - would help.

Thanks in advance and have a blessed day!

Carlos
  • 21
  • 3
  • You can find an example in [this post](https://stackoverflow.com/questions/61296253/simple-shuffle-js-search-not-working-with-bootstrap-4-cards/61297974#61297974). It uses shufflejs and Bootstrap card layout. This way you can make it gridd less, which makes it a lot easier to skip dealing with columns. – Tim Vermaelen Jun 29 '20 at 23:15

0 Answers0