![](/img/trans.png)
[英]How to filter/search through materialize css/bootstrap when cards are used?
[英]How to filter bootstrap cards based on search box
我使用 Laravel 5.8 创建了一个应用程序。 在继续阅读之前,请向下滚动以查看图像,这将有助于我解释问题。
搜索框旨在查找<H5>
标签内的匹配文本,然后隐藏任何recipe-card
ID div。
有两个问题:
我希望有人可以帮助我解决我需要使用的 JavaScript 来完成此任务。
Laravel view.blade.php 显示我的食谱卡
<div class="container">
<div class="row pb-4">
<div class="col-12">
<input type="text" name="searchbox" id="searchbox" class="filterinput form-control" placeholder="Search recipe titles and tags...">
</div>
</div>
<div class="row">
@foreach ($recipes as $recipe)
<div class="col-lg-4 pb-4" id="recipe-card">
<div class="card h-100">
<a href="/recipes/{{ $recipe->id}}"><img class="card-img-top " src="{{ $recipe->imgurl}}" alt="{{ $recipe->name }}"></a>
<div class="card-body">
<h5 class="card-title"><a href="/recipes/{{ $recipe->id}}"> {{ $recipe->name }} </a> {{ $recipe->favourite == 'Yes' ? ' Fav' : '' }} </h5>
<p class="card-text">
<span id="">Time:{{ $recipe->totaltime }}</span>
</p>
<p class="card-text">
<span id="">Type:{{ $recipe->mealtype }}</span>
</p>
</div>
<div class="card-footer text-muted text-truncate">
<span class="badge badge-secondary">{{ $recipe->tags }}</span>
</div>
</div>
</div>
@endforeach
</div>
这是我目前用于过滤的 JavaScript:
<script>
$(document).ready(function() {
$("#searchbox").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#recipe-card div").filter(function() {
$(this).toggle($(this).find('h5').text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
上面的代码产生这个:
使用搜索之前
搜索标题(H5 标签)为“碗”的食谱后
您的选择器#recipe-card div
实际上并没有按照您的意愿行事。 它不是抓取卡片内的第一个 div,而是抓取卡片内的所有div。
此外,您应该避免对多张卡重复使用相同的 ID,而是使用类似数据角色的东西。 ID 应该是唯一的,因此拥有多个相同的 ID 通常是不好的做法。
如果您改为使用data-role="recipe"
,则可以使用此选择器:
$('div[data-role="recipe"] div:first)
或者,只需在内部 div 上放置一个数据角色,然后专门选择该元素。
这可能无法解决您的所有问题,但从这里开始,如果还有任何问题,请告诉我。
OP 附加了以下 JS 解决方案,并将其标记为正确答案:
<script>
$(document).ready(function() {
$("#searchbox").on("keyup", function() {
var value = $(this).val().toLowerCase();
$('div[data-role="recipe"]').filter(function() {
$(this).toggle($(this).find('h5').text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
列不应都具有相同的 ID。 此外,jQuery 代码应该隐藏列 (col-lg-4),而不是卡片。 有很多不同的方法可以在 jQuery 中处理...
$('#searchbox').keyup(function (){
$('.col-lg-4').removeClass('d-none');
var filter = $(this).val();
if (filter && filter.length>0){
$('.row').find('.col-lg-4 .card-body h5:not(:contains("'+filter+'"))').parentsUntil('.col-lg-4').parent().addClass('d-none');
}
});
尝试这个:
$('#searchbox').on("keyup", function() {
$('.card').show();
var filter = $(this).val();
$('#recipe-card').find(".card-title:not(:contains(" + filter + "))").parent().css('display','none');
});
如果您希望卡片在过滤后折叠到正确的位置,您可以考虑使用引导程序的“卡片列”或“卡片组”类进行布局。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.