Question

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

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 Card组/卡中实现搜索功能？

2 个答案: