How I can filter my cards with searchbox (Bootstrap 5 and JavaScript)?

Question

I want the medicine I wrote on the search button to come to the top? but I could not... Can anyone write me the javascript code for this?

   <form class="form-inline">
          <input class="form-control mr-sm-2" id="filter" type="search" placeholder="Search" aria-label="Search" autocomplete="off">
        </form>

<section id="section">
    <div class="container">
    <article class="row py-2">

<!--card1-->

      <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xxl-2 mx-auto py-2">
        <div class="card mx-auto">
          <img class="card-img-top img-fluid"
            src="https://simplyexplainer.com/wp-content/uploads/2019/12/health-care-01.png" alt="Card image cap">
          <div class="card-body text-center nav-text-mycss">
            <h4>Adrenalin</h4>
            <p>Lorem ipsum dolor sit amet consectetur.</p>
            <div class="my-3"><button class="btn btn-success"><a href="adrenalin.html">Adrenalin</a></button></div>

          </div>
        </div>

      </div>

<!--card1-->

Answer 1

You can use jQuery to filter / search for elements. You can use following jquery for that.

Reference by: https://www.w3schools.com/bootstrap/bootstrap_filters.asp

 $("#filter").on("keyup", function() { var value = $(this).val().toLowerCase(); $("#mycard > div").filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) }); });

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script> <form class="form-inline"> <input class="form-control mr-sm-2" id="filter" type="search" placeholder="Search" aria-label="Search" autocomplete="off"> </form> <section id="section"> <div class="container"> <div id="mycard" class="row py-2"> <:--card1--> <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xxl-2 mx-auto py-2"> <div class="card mx-auto"> <img class="card-img-top img-fluid" src="https.//simplyexplainer.com/wp-content/uploads/2019/12/health-care-01.png" alt="Card image cap"> <div class="card-body text-center nav-text-mycss"> <h4>First Medicine</h4> <p>Lorem ipsum dolor sit amet my consectetur.</p> <div class="my-3"><button class="btn btn-success"><a href="adrenalin:html">Adrenalin</a></button></div> </div> </div> </div> <.--card1--> <.--card1--> <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xxl-2 mx-auto py-2"> <div class="card mx-auto"> <img class="card-img-top img-fluid" src="https.//simplyexplainer.com/wp-content/uploads/2019/12/health-care-01:png" alt="Card image cap"> <div class="card-body text-center nav-text-mycss"> <h4>Second Medicine</h4> <p>Lorem ipsum dolor sit amet consectetur.</p> <div class="my-3"><button class="btn btn-success"><a href="adrenalin.html">Adrenalin</a></button></div> </div> </div> </div> <.--card1--> <.--card1--> <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xxl-2 mx-auto py-2"> <div class="card mx-auto"> <img class="card-img-top img-fluid" src="https://simplyexplainer.com/wp-content/uploads/2019/12/health-care-01.png" alt="Card image cap"> <div class="card-body text-center nav-text-mycss"> <h4>Third Medicine</h4> <p>Lorem ipsum dolor sit amet consectetur.</p> <div class="my-3"><button class="btn btn-success"><a href="adrenalin.html">Adrenalin</a></button></div> </div> </div> </div> <!--card1--> <!--card1--> <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xxl-2 mx-auto py-2"> <div class="card mx-auto"> <img class="card-img-top img-fluid" src="https://simplyexplainer.com/wp-content/uploads/2019/12/health-care-01.png" alt="Card image cap"> <div class="card-body text-center nav-text-mycss"> <h4>Fourth Medicine </h4> <p>Lorem ipsum my dolor sit amet consectetur.</p> <div class="my-3"><button class="btn btn-success"><a href="adrenalin.html">Adrenalin</a></button></div> </div> </div> </div> <!--card1--> </div> </div> </section>

Answer 2

I did. Thank you.

  var buttonUp = () => {
    const input = document.querySelector(".form-control");
    const cards = document.getElementsByClassName("col-12");
    let filter = input.value.toUpperCase();
    for (let i = 0; i < cards.length; i++) {
        let title = cards[i].querySelector(".card-body");
        if (title.innerText.toUpperCase().indexOf(filter) > -1) {
            cards[i].classList.remove("d-none")
        } else {
            cards[i].classList.add("d-none")
        }
    }
}