[英]Filter cards in Bootstrap 4 with jQuery
I am attempting to create a page that is populated by many cards, using bootstrap 4's new card component.我正在尝试使用引导程序 4 的新卡片组件创建一个由许多卡片填充的页面。
I want to create a search bar, that when searched, filters out cards whose titles don't match the search query.我想创建一个搜索栏,在搜索时过滤掉标题与搜索查询不匹配的卡片。
Here is a plunker of what I have in mind.这是我想到的一个plunker。 Plunker普朗克
I would like the cards to get something like a display: none
, or opacity:0
if they don't match.如果它们不匹配,我希望卡片得到类似display: none
或opacity:0
东西。
I currently am attempting to write a function that onChange
of the search bar does this.我目前正在尝试编写一个函数,搜索栏的onChange
执行此操作。 I'll post if I can get it figured out.如果我能弄清楚,我会发布。
I've tried to use the built in snippet feature as well.我也尝试使用内置的代码段功能。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script> <link href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" rel="stylesheet" /> <div class="container"> <div class="row"> <div class="col-sm-4"> <input type="search" placeholder="Search......" name="search" class="searchbox-input" onkeyup="buttonUp();" required> </div> <div class="col-sm-4"> </div> <div class="col-sm-4"> </div> </div> <div class="card-columns"> <div class="card"> <div class="card-block"> <h4 class="card-title">Card title that wraps to a new line</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> </div> </div> <div class="card card-block"> <blockquote class="card-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer> <small class="text-muted"> Someone famous in <cite title="Source Title">Source Title</cite> </small> </footer> </blockquote> </div> <div class="card"> <div class="card-block"> <h4 class="card-title">Card title</h4> <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small> </p> </div> </div> <div class="card card-block card-inverse card-primary text-xs-center"> <blockquote class="card-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p> <footer> <small> Someone famous in <cite title="Source Title">Source Title</cite> </small> </footer> </blockquote> </div> <div class="card card-block text-xs-center"> <h4 class="card-title">Card title</h4> <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small> </p> </div> <div class="card"> </div> <div class="card card-block text-xs-right"> <blockquote class="card-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer> <small class="text-muted"> Someone famous in <cite title="Source Title">Source Title</cite> </small> </footer> </blockquote> </div> <div class="card card-block"> <h4 class="card-title">Card title</h4> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small> </p> </div> </div> </div>
Here's a quick example of how you could do it using jQuery's contains selector :这是一个快速示例,说明如何使用 jQuery 的contains 选择器执行此操作:
$('.searchbox-input').change( function () {
$('.card').show();
var filter = $(this).val(); // get the value of the input, which we filter on
$('.container').find(".card-title:not(:contains(" + filter + "))").parent().css('display','none');
});
Currently this is set up to happen on change of the search input, you would probably want set up a submit button and have it fire on submit instead.目前,这设置为在更改搜索输入时发生,您可能希望设置一个提交按钮并在提交时触发它。
Here is the simple solution.这是简单的解决方案。
$(document).ready(function(){
$('.searchbox-input').on("keyup", function() {
var value = $(this).val().toLowerCase();
$(".card").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
Here are a few more modern options that are Bootstrap 4 or Bootstrap 5 friendly...这里有一些更现代的选项,它们对 Bootstrap 4 或 Bootstrap 5 友好......
Bootstrap 5 (using JavaScript) Bootstrap 5(使用 JavaScript)
var buttonUp = () => {
const input = document.querySelector(".searchbox-input");
const cards = document.getElementsByClassName("card");
let filter = input.value
for (let i = 0; i < cards.length; i++) {
let title = cards[i].querySelector(".card-body");
if (title.innerText.indexOf(filter) > -1) {
cards[i].classList.remove("d-none")
} else {
cards[i].classList.add("d-none")
}
}
}
Bootstrap 4 (using jQuery) Bootstrap 4(使用 jQuery)
// this overrides `contains` to make it case insenstive
jQuery.expr[':'].contains = function(a, i, m) {
return jQuery(a).text().toUpperCase()
.indexOf(m[3].toUpperCase()) >= 0;
};
var buttonUp = () => {
$('.card').removeClass('d-none');
var filter = $(this).val(); // get the value of the input, which we filter on
$('.card-deck').find('.card .card-body h4:not(:contains("'+filter+'"))').parent().parent().addClass('d-none');
}
$(document).ready(function() {
$('#searchForm').keyup(function(){
search_text($(this).val());
});
function search_text(value){
$('#search_section .card').each(function(){
var found = 'false';
$(this).each(function(){
if($(this).text().toLowerCase().indexOf(value.toLowerCase()) >= 0)
{
found = 'true';
}
});
if(found == 'true'){
$(this).show()
}
else {
$(this).hide();
}
})
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.