时间戳

首页 > 解决方案 > 如何在 Bootstrap Card 组/卡片中实现搜索功能？

python - 如何在 Bootstrap Card 组/卡片中实现搜索功能？

问题描述

我创建了一个页面，显示引导卡中的所有用户。我想知道如何在仅过滤掉该用户卡的搜索框中搜索用户，并将其清除应该带回所有用户卡。在使用 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>

标签： pythonjqueryhtmldjangobootstrap-cards

解决方案

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

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

我们实现了一个 for 循环并访问它的 data-string 属性，如果它包含输入的子字符串（使用.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>

推荐阅读