How to implement search functionality in Bootstrap Card group/cards?

Question

I have created a page that displays all the users in bootstrap cards. I would like to know how can I search a user in a search box that filters out only that user card and clearing it out should bring all the user cards back. Need help in implementing with jquery or any other option.

Code:

<div class="container" style="margin:150px auto 30px auto;">
   <div class="row">
      <div class="col-md-12">
         <p>Type some text to search:</p>
         <input type="text" class="Search" placeholder="Search User name:"> 
      </div>
   </div>
</div>
</div>
<div class="container">
   <br />
   <div>
      <h1 class="text-center">Users({{all_users|length}})</h1>
   </div>
   <br/>
   <div class="card-group">
      {% for user in all_users %}
      <div class="card col-3 text-center">
         <div class="card-header text_center">
            <h4 class="card-title"><a href="{% url 'views.user_profile' username=user.username %}" target="_top">{{user.first_name}} {{user.last_name}}</a></h4>
         </div>
         <div class="card-body bg-light">
            <p class="card-text text-center">
               {{user.user_profile.title}}<br/>
               {{user.user_profile.empid}}<br/>
            </p>
         </div>
      </div>
      {% if forloop.counter|divisibleby:4 %}
   </div>
   <br />
   <div class="card-group">{% endif %}
      {% endfor %}
   </div>
</div>

score 2 · Accepted Answer · answered Dec 20 '19 at 09:29

Replace data-string with data-string="{{user.first_name}} {{user.last_name}}".

For this example I only used two parameters, which is first name last name but you could extend the search by adding more; data-string="{{user.first_name}} {{user.last_name}} {{user.empid}}"

We implemented a for loop and access its data-string property, if it contains a substring of the input (using .indexOf()), then we will show it, else hide it.

Try the demo below;

$(".filter").on("keyup", function() {
  var input = $(this).val().toUpperCase();

  $(".card").each(function() {
    if ($(this).data("string").toUpperCase().indexOf(input) < 0) {
      $(this).hide();
    } else {
      $(this).show();
    }
  })
});

.card {
  width: 150px;
  height: 160px;
  display: inline-block;
  padding: 10px;
  border: 1px solid black;
  margin-bottom: 10px;
}

.filter {
  margin-bottom: 30px;
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input class="filter" placeholder="filter" />

<div class="card col-3 text-center" data-string="John A">
  <div class="card-header text_center">
    <h4 class="card-title"><a href="{% url 'views.user_profile' username=user.username %}" target="_top">John A</a></h4>
  </div>
  <div class="card-body bg-light">
    <p class="card-text text-center">
      {{user.user_profile.title}}<br/> {{user.user_profile.empid}}
      <br/>
    </p>
  </div>
</div>

<div class="card col-3 text-center" data-string="Jana B">
  <div class="card-header text_center">
    <h4 class="card-title"><a href="{% url 'views.user_profile' username=user.username %}" target="_top">Jana B</a></h4>
  </div>
  <div class="card-body bg-light">
    <p class="card-text text-center">
      {{user.user_profile.title}}<br/> {{user.user_profile.empid}}
      <br/>
    </p>
  </div>
</div>

<div class="card col-3 text-center" data-string="Jerdz C">
  <div class="card-header text_center">
    <h4 class="card-title"><a href="{% url 'views.user_profile' username=user.username %}" target="_top">Jerdz C</a></h4>
  </div>
  <div class="card-body bg-light">
    <p class="card-text text-center">
      {{user.user_profile.title}}<br/> {{user.user_profile.empid}}
      <br/>
    </p>
  </div>
</div>

<div class="card col-3 text-center" data-string="Jake D">
  <div class="card-header text_center">
    <h4 class="card-title"><a href="{% url 'views.user_profile' username=user.username %}" target="_top">Jake D</a></h4>
  </div>
  <div class="card-body bg-light">
    <p class="card-text text-center">
      {{user.user_profile.title}}<br/> {{user.user_profile.empid}}
      <br/>
    </p>
  </div>
</div>

Thanks @Jerdine. I have tried the above approach but I have card-group and within that I have 4 cards in each row. When I try using this search box, I'm getting the filtered cards in it's corresponding row(Ex: one card in first row and one card in 10th row) but I want all the filtered cards as in successive orders. — Santhosh, Dec 26 '19 at 05:01
@Santhosh I see. By row, what class are you using, `card-group?` Have you tried putting all of the cards in 1 `card-group` only? — Jerdine Sabio, Dec 26 '19 at 05:05
@Santhosh if you could provide a jsfiddle with your css, I think I could make some adjustments. — Jerdine Sabio, Dec 26 '19 at 05:06
@Jerdie, please refer the code https://jsfiddle.net/95avwgL1/1/ . I have card-group classes for cards something like in the above link. — Santhosh, Dec 26 '19 at 05:08
@Santhosh oh I mean, with your actual css. The one that defines `cards` and `card group` — Jerdine Sabio, Dec 26 '19 at 05:09
I'm using Bootstrap css's for card-group and cards. I don't have any customised CSS for these classes. — Santhosh, Dec 26 '19 at 05:11
@Santhosh is this bootstrap 3 or 4? will you link the css, thanks. — Jerdine Sabio, Dec 26 '19 at 05:20
I'm using Bootstrap 4 for this. Please use this JS Fiddle to see the actual issue when I'm using the search filter https://jsfiddle.net/q7y3sb64/. Example : Type 'Ja' It lists two cards on two different rows but I want them to be on the same row. — Santhosh, Dec 26 '19 at 05:26
@Santhosh I'll get back to you in an hour or 2, but I'm working on a solution. — Jerdine Sabio, Dec 26 '19 at 06:04
@Santhosh You're welcome! Will you mark the answer as the correct answer so this could be closed. An upvote too is helpful ;) Good luck with the project! — Jerdine Sabio, Dec 26 '19 at 08:37
Is it possible to give any of your suggestions on this post , https://stackoverflow.com/questions/59492852/display-multiselect-bootstrap-drop-down-value-in-div-with-checkbox-options — Santhosh, Dec 27 '19 at 10:02

score 1 · Answer 2 · answered Dec 26 '19 at 07:14

Modified the original answer to add another card group if an existing card group already has 4 visible cards.

Try demo below.

$(".filter").on("keyup", function() {
  var input = $(this).val().toUpperCase();
  var visibleCards = 0;
  var hiddenCards = 0;

  $(".container").append($("<div class='card-group card-group-filter'></div>"));


  $(".card").each(function() {
    if ($(this).data("string").toUpperCase().indexOf(input) < 0) {

      $(".card-group.card-group-filter:first-of-type").append($(this));
      $(this).hide();
      hiddenCards++;

    } else {

      $(".card-group.card-group-filter:last-of-type").prepend($(this));
      $(this).show();
      visibleCards++;

      if (((visibleCards % 4) == 0)) {
        $(".container").append($("<div class='card-group card-group-filter'></div>"));
      }
    }
  });

  $(".card-group").each(function() {
    if ($(this).find("div").length == 0) {
      $(this).remove();
    }
  })
});

.filter {
  margin-bottom: 30px;
  display: block;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input class="filter" placeholder="filter" />
<div class="container">


  <div class="card-group">

    <div class="card col-3 text-center" data-string="John A">
      <div class="card-header text_center">
        <h4 class="card-title"><a href="{% url 'views.user_profile' username=user.username %}" target="_top">John A</a></h4>
      </div>
      <div class="card-body bg-light">
        <p class="card-text text-center">
          {{user.user_profile.title}}<br /> {{user.user_profile.empid}}
          <br />
        </p>
      </div>
    </div>

    <div class="card col-3 text-center" data-string="Jana B">
      <div class="card-header text_center">
        <h4 class="card-title"><a href="{% url 'views.user_profile' username=user.username %}" target="_top">Jana B</a></h4>
      </div>
      <div class="card-body bg-light">
        <p class="card-text text-center">
          {{user.user_profile.title}}<br /> {{user.user_profile.empid}}
          <br />
        </p>
      </div>
    </div>

    <div class="card col-3 text-center" data-string="Jerdz C">
      <div class="card-header text_center">
        <h4 class="card-title"><a href="{% url 'views.user_profile' username=user.username %}" target="_top">Jerdz C</a></h4>
      </div>
      <div class="card-body bg-light">
        <p class="card-text text-center">
          {{user.user_profile.title}}<br /> {{user.user_profile.empid}}
          <br />
        </p>
      </div>
    </div>

    <div class="card col-3 text-center" data-string="James D">
      <div class="card-header text_center">
        <h4 class="card-title"><a href="{% url 'views.user_profile' username=user.username %}" target="_top">James D</a></h4>
      </div>
      <div class="card-body bg-light">
        <p class="card-text text-center">
          {{user.user_profile.title}}<br /> {{user.user_profile.empid}}
          <br />
        </p>
      </div>
    </div>
  </div>
  <div class="card-group">
    <div class="card col-3 text-center" data-string="Jake E">
      <div class="card-header text_center">
        <h4 class="card-title"><a href="{% url 'views.user_profile' username=user.username %}" target="_top">Jake E</a></h4>
      </div>
      <div class="card-body bg-light">
        <p class="card-text text-center">
          {{user.user_profile.title}}<br /> {{user.user_profile.empid}}
          <br />
        </p>
      </div>
    </div>
    <div class="card col-3 text-center" data-string="Jora F">
      <div class="card-header text_center">
        <h4 class="card-title"><a href="{% url 'views.user_profile' username=user.username %}" target="_top">Jora F</a></h4>
      </div>
      <div class="card-body bg-light">
        <p class="card-text text-center">
          {{user.user_profile.title}}<br /> {{user.user_profile.empid}}
          <br />
        </p>
      </div>
    </div>
  </div>
</div>

How to implement search functionality in Bootstrap Card group/cards?

2 Answers2