如何在Bootstrap卡片group/cards中实现搜索功能？

Question

我创建了一个页面，显示 bootstrap 卡片中的所有用户。我想知道如何在搜索框中搜索用户，该搜索框仅过滤掉该用户卡并清除它应该会恢复所有用户卡。在使用 jquery 或任何其他选项实施时需要帮助。

代码：

<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>

Answer 1

将数据字符串替换为 data-string="{{user.first_name}} {{user.last_name}}"。

对于这个例子，我只使用了两个参数，即名字和姓氏，但您可以通过添加更多参数来扩展搜索； data-string="{{user.first_name}} {{user.last_name}} {{user.empid}}"

我们实现了一个 for 循环并访问它的数据字符串属性，如果它包含输入的子字符串（使用 .indexOf()），那么我们将显示它，否则隐藏它。

试试下面的演示；

$(".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>

Answer 2

修改了原始答案以在现有卡片组已经有 4 张可见卡片的情况下添加另一个卡片组。

试试下面的演示。

$(".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>

如何在Bootstrap卡片group/cards中实现搜索功能？

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

python

jquery

html

django

bootstrap-cards