Exploring the functionality of filtering cards using a search box in Bootstrap 5 and JavaScript

https://i.sstatic.net/VlD20.png

I tried to bring the medicine I searched for to the top by clicking on the search button, but unfortunately it did not work. Can someone help me with writing 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-->
javascriptbootstrap-5

Answer №1

If you want to filter or search for elements using jQuery, you can easily do so with the following jQuery code snippet.

For more information, check out: 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0e6c61617a7d7a7a7c4f6b886c65666b6c00606e60696e49606660">[email protected]</a>/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="385a57574c4b4c4a59487808676878575787748868767838a867784">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="80eaf1f5e5f2f9c0b3ae95bfbe95bb824c75bbbab5bcbdd681aeaeb0b7">[email protected]</a>/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

Yes, I have completed the task. Much appreciated.

  const handleClick = () => {
    const userInput = document.querySelector(".input-field");
    const elements = document.getElementsByClassName("grid-element");
    let searchQuery = userInput.value.toUpperCase();
    for (let j = 0; j < elements.length; j++) {
        let itemName = elements[j].querySelector(".item-name");
        if (itemName.innerText.toUpperCase().indexOf(searchQuery) > -1) {
            elements[j].classList.remove("hidden")
        } else {
            elements[j].classList.add("hidden")
        }
    }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Updating the current date at midnight or on the new day in JavaScript can be achieved using specific date and time

I have a web watch that is supposed to work 24/7 and display the digital time along with the current day. However, my issue is that when the time passes midnight, the current day does not update and I am forced to restart the entire application. I attempt ...

javascripthtml

Is it possible to stop WebPack 5 from importing and bundling third-party libraries?

I have been working on a code snippet that utilizes the Popover feature of bootstrap 5. Here is a snippet from my ts file: import { Popover } from "bootstrap"; export class MdsPersianDateTimePicker { constructor(element: Element) { ...

webpackbootstrap-5

Error occurred while fetching image from Medium story API in Next.js

While working on my Next.js app, I encountered an issue with the Medium story API. Every time I try to fetch and display an image using the API, I receive an error message stating "upstream image response failed." The specific error code is: upstream image ...

javascripthtmlnext.jsjavascript-objects

When trying to access a URL in a next.js application using the fetch() function, the router encountered an

I recently started working on a frontend project using Next.js v13.4 app router, with an additional backend. I have organized my routes and related functionalities in the api folder within the app directory. However, when I attempt to use the fetch() funct ...

javascriptreactjsnext.jsfetch-apiapp-router

Is there a way to change the default Bootstrap colors in my Astro project?

Currently working on my Astro project where I have incorporated SCSS functionality. Bootstrap source files (version 5.3.2) have been downloaded and the entire scss folder contents are stored under src/bootstrap in my project. In the foundation of my layou ...

sassbootstrap-5astrojs

typescript what type of functionality do dynamic class methods provide

I'm currently working on building a class that creates dynamic methods during the constructor stage. While everything is functioning properly, I've encountered an issue with VS Code's auto suggestion not recognizing these dynamic methods. Ho ...

javascripttypescriptclasstypesinterface

Tips for structuring route dependencies in Node.js and Express

Although I have a good grasp of exporting routes to an index.js file, my struggle lies in properly referencing external route dependencies without having to copy them to the top of the file. For instance, if I have the main entry point of the program (ind ...

javascriptnode.jsexpress

Where can you find the invalid character causing a syntax error in the jQuery $.ajax call?

My jQuery code is calling a WCF method, and although the method returns a Boolean true and logs successfully, the error handler displays "AJAX call failed in CallIsDataReady" with a "Syntax Error: Invalid character." This causes the callUpdateGrid function ...

javascriptjqueryajaxwcf

Questions on how to utilize ES6 Express and static methods

Recently, I've been working with Express and wanted to incorporate ES6 using babel in my project. One question that has been on my mind is related to the use of static methods for handling requests, as shown below: class MyCtrl { static index (r ...

javascriptnode.jsexpressbabeljs

When using jQuery's POST method, the "done" event is triggered, however, no data is being sent

I've been working on implementing AJAX form submission and wrote a function to handle it when the button is clicked: function putUser() { $('button#putUser').on('click', function() { var user = $('input#user' ...

javascriptjqueryajaxforms

Is it possible to use nodemailer locally with NodeJS? The issue is that the greeting emails are not being received

Every time I attempt to send an email using nodemailer within my local network, I encounter the following error: *Greeting never received at SMTPConnection._formatError (C:\Users\PI_TEAM\Desktop\node_modules\nodemailer\lib ...

javascriptnode.jssmtplocalnodemailer

Obtain a nested array of objects from Mongoose's Model.find() method and then make modifications to the inner array

I need to retrieve an array of objects with a specific ID from my database within a server route, and then update a property of an object within that array (rather than returning just the objectID, I want to return the Document as an object with the specif ...

javascriptmongodbexpressmongoose

Why is the defaultDate property not functioning properly in Material-UI's <DatePicker/> component with ReactJS?

I recently implemented the <DatePicker/> component from Material-UI ( http://www.material-ui.com/#/components/date-picker ) in my project. I encountered an issue while trying to set the defaultDate property to the current date on my computer, as it r ...

javascriptcssreactjsdatepickermaterial-ui

Troubleshooting: Why is my Local Image not displaying in ReactJS

I am facing an issue with displaying images in my React application using an array of image paths. Below is the code snippet I have written: import React, { Component } from 'react'; class ItemsList extends Component { constructor() { ...

javascriptreactjsimage

Extract a free hour from the JavaScript time array without any filtering

In my Javascript array, I have the teaching schedule of a teacher for the day. { "time": [ { "start":"10:00","end":"11:00" }, { "start":"12:00","end":"01:00" }, { "start":"04:00","end":"06:00" } ] } My goal is to determine the free hours in the abo ...

javascriptarraysjson

Clickable link that directs to a particular tab on a webpage (cbpFWTabs)

I have been utilizing tabs from the codrops Tab Styles Inspiration and I am looking for a way to open specific tabs using URLs. For instance, if I wanted to open tab3, I could link it as www.google.com/index#tab3. Below is the code I am currently using: ...

javascriptjqueryhtml

Create a variable to store the sum value when iterating through a range using jQuery's

Currently, I am in the process of developing a specialized calculator that requires me to calculate the sum of variables within my jQuery.each loop for a specific range from 0 to 4 (equivalent to 5 years). While I have come across several informative reso ...

javascriptjquery

The attempt to perform a Diffie-Hellman key exchange between Python and Node has hit a roadblock, as an error stating that

Currently, I am attempting to establish a DH key exchange between a Python 3.6 client and a Node server deployed in a Docker container with the latest node image (Node version: v13.10.1). On the client side, I am utilizing the cryptography.io library (v2. ...

javascriptpythonnode.jscryptographydiffie-hellman

Limit the usage of Lightning Web Component instances to only one per user

Is there a way to restrict users in Salesforce to using only one instance of a Lightning Web Component? I am new to Salesforce Lightning Web Components and looking for a solution to limit the number of instances a user can create through either permission ...

javascriptsalesforcesalesforce-lightning

Why does Vuetify/Javascript keep throwing a ReferenceError stating that the variable is undefined?

I'm currently developing in Vuetify and I want to incorporate a javascript client for Prometheus to fetch data for my application. You can find the page Here. Despite following their example, I keep encountering a ReferenceError: Prometheus is not def ...

javascriptvue.jsvuetify.js