我正在处理一个网页，但似乎无法弄清楚如何使搜索功能正常工作。当前，页面上的项目是分页的。它一次最多显示六篇文章，然后将其推送到下一页。我的问题是，按文章名称搜索仅显示您搜索的文章（如果它们在该特定页面上）。因此，如果您位于页面底部的“第二页”上，并且搜索文章“ Maurizio Artisan Pasta”，则会显示该文章，因为它在该页面上，但是如果您搜索的是“第1页”，将不会显示任何结果。我重新创建了以下页面：
//limit characters for blurb
$(".blurb").text(function(index, currentText) {
return currentText.substr(0, 120)+"...";
});
$(document).ready(function(){
$('#search').keyup(function() {
//grab the search value
var text = $(this).val();
//hide all class content
$('.content').hide();
//find matching texting
$('.content .title:contains("'+text+'")').closest('.content').show();
});
//remove case sensativity
$.expr[":"].contains = $.expr.createPseudo(function(arg) {
return function( elem ) {
return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
};
});
});
//generate new pagination list
var monkeyList = new List('pagination-list', {
valueNames: ['name'],
page: 6,
pagination: true
});
//hide slider image
function LoadImage(){
if ($(window).width() >= 768) {
$('#sliderMain').show();
} else if ($(window).width() <= 768) {
$('#sliderMain').hide();
}
}
LoadImage();
$(window).resize(LoadImage);<!-- Bootstrap Core CSS -->
<link href="https://www.cento.com/css/bootstrap.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="https://www.cento.com/css/styles.css" rel="stylesheet">
<link href="https://www.cento.com/css/jqueryscrollbox.css" rel="stylesheet">
<link href="https://www.cento.com/css/bs-carousel.css" rel="stylesheet">
<link href="https://www.cento.com/css/image-effects.css" rel="stylesheet">
<link href="https://www.cento.com/css/products.css" rel="stylesheet">
<link href="https://www.cento.com/css/animations.css" rel="stylesheet">
<link href="https://www.cento.com/css/flexslider.css" rel="stylesheet">
<link href="https://www.cento.com/css/simplePagination.css" rel="stylesheet">
<link href="https://www.cento.com/images/favicon/favicon.ico" rel="shortcut icon" type="image/x-icon">
<link href="https://www.cento.com/css/search.css" rel="stylesheet">
<link href="https://www.cento.com/css/timeline.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css" rel="stylesheet" >
<link href="https://www.cento.com/css/jsmaps.css" rel="stylesheet">
<!-- jQuery -->
<script src="https://www.cento.com/js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="https://www.cento.com/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
<!-- Articles Header Start -->
<section id="sliderMain">
<div class="carousel fade-carousel slide" data-ride="carousel" data-interval="4000" id="bs-carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item slides active">
<div class="articles-1"></div>
<div class="hero">
<hgroup>
<h1>Articles</h1>
</hgroup>
</div>
</div>
</div>
</div>
</section>
<!-- Articles Header End -->
<!-- Breadcrumbs Start -->
<section>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<ol class="breadcrumb">
<li><a href="../index.php">Home</a></li>
<li class="active">Articles</li>
</ol>
</div>
</div>
</div>
</section>
<!-- Articles Pagination Container -->
<div id="pagination-list">
<!-- Search Articles Filter Row Start -->
<div class="container">
<div class="row">
<div class="col-md-12">
<br>
<input type='text' id="search" class="form-control fontAwesome" name="searchArticles" placeholder=" Search articles...">
</div>
</div>
</div>
<!-- Search Articles Filter Row End -->
<!-- Articles Row -->
<section>
<div class="container topmargin">
<div class="row">
<!-- Categories Start -->
<div class="col-md-3">
<ul style="margin-bottom: 40px;" class="nav nav-stacked" id="sidebar">
<li><a href="#">Olive Oils</a></li>
<li><a href="#">Tomatoes</a></li>
<li><a href="#">Pasta Cuts</a></li>
<li><a href="#">Holiday Guides</a></li>
<li><a href="#">Seafood</a></li>
<li><a href="#">Organics</a></li>
<li><a href="#">Olives</a></li>
<li><a href="#">In The Media</a></li>
<li><a href="#">New Items</a></li>
</ul>
</div>
<!-- Categories End -->
<!-- Articles Start -->
<div class="col-md-9">
<div class="row">
<!-- Articles Pagination Sub Container -->
<div class="list">
<div class="col-md-6 name content">
<!-- Olive Oil Guide -->
<div class="thumbnail">
<img class="img-responsive" src="https://www.cento.com/images/articles/olive_oil_guide/evoo_pouring_alt.jpg" alt="Olive Oil Guide">
<div class="caption">
<h1 class="title">Olive Oil Guide</h1>
<p class="blurb">Olive oil is one of the most versatile and essential ingredients in the world of cooking. Use our Olive Oil Guide to learn about the differences between extra virgin and classic olive oil, as well as their best uses and storage tips to help keep your olive oil fresh longer.</p>
<a href="2018/olive-oil-guide.php"><button type="button" value="Read More" class="btn btn-info btn-lg center">Read More</button></a>
</div>
</div>
</div>
<div class="col-md-6 name content">
<!-- Quality Assurance -->
<div class="thumbnail">
<img class="img-responsive" src="https://www.cento.com/images/articles/quality_assurance/lindsay_vial2.jpg" alt="Quality Assurance">
<div class="caption">
<h1 class="title">Quality Assurance</h1>
<p class="blurb">At Cento, we don’t cut corners. We don’t sell anything that we wouldn’t serve to our family and we would never sacrifice quality when it comes to our customers. Learn more about our extensive quality assurance practices and the steps we take to ensure Cento products consistently meet our high standards.</p>
<a href="2018/quality-assurance.php"><button type="button" value="Read More" class="btn btn-info btn-lg center">Read More</button></a>
</div>
</div>
</div>
<div class="col-md-6 name content">
<!-- Cento's Test Kitchen -->
<div class="thumbnail">
<img class="img-responsive" src="https://www.cento.com/images/articles/cento_recipes/recipe_chef.jpg" alt="Cento's Test Kitchen">
<div class="caption">
<h1 class="title">Cento's Test Kitchen</h1>
<p class="blurb">Our collection of more than 250 authentic Italian recipes was hand-crafted by our Executive Chef, Chef Cento, specifically for Cento products. Learn more about Chef Cento’s recipe development process and why for the best results, you should always use Cento.</p>
<a href="2018/cento-test-kitchen.php"><button type="button" value="Read More" class="btn btn-info btn-lg center">Read More</button></a>
</div>
</div>
</div>
<div class="col-md-6 name content">
<!-- Easter Traditions -->
<div class="thumbnail">
<img class="img-responsive" src="https://www.cento.com/images/articles/easter_traditions/colomba.jpg" alt="Easter Traditions">
<div class="caption">
<h1 class="title">Easter Traditions</h1>
<p class="blurb">Easter is the second-most celebrated holiday in Italy. This weekend long affair celebration is full of friends, family and delicious traditional foods. Learn more about the Italian Easter tradition and the desserts enjoyed in celebration.</p>
<a href="2018/easter-traditions.php"><button type="button" value="Read More" class="btn btn-info btn-lg center">Read More</button></a>
</div>
</div>
</div>
<div class="col-md-6 name content">
<!-- San Marzano Tomatoes -->
<div class="thumbnail">
<img class="img-responsive" src="https://www.cento.com/images/articles/san-marzano-tomatoes/san-marzano-tomatoes.jpg" alt="San Marzano Tomatoes">
<div class="caption">
<h1 class="title">San Marzano Tomatoes</h1>
<p class="blurb">San Marzano tomatoes are widely recognized by top chefs, foodies, Italian cooks and food aficionados as the gold standard for taste, but what makes them so special? Learn more about San Marzano tomatoes and the steps we take at Cento to ensure authenticity and superior quality.</p>
<a href="2018/san-marzano-tomatoes.php"><button type="button" value="Read More" class="btn btn-info btn-lg center">Read More</button></a>
</div>
</div>
</div>
<div class="col-md-6 name content">
<!-- Mastering Risotto -->
<div class="thumbnail">
<img class="img-responsive" src="https://www.cento.com/images/articles/mastering_risotto/arborio-carnaroli.jpg" alt="Mastering Risotto">
<div class="caption">
<h1 class="title">Mastering Risotto</h1>
<p class="blurb">While risotto may have an intimidating reputation because of the attention it requires, risotto is actually very easy to prepare and never fails to impress. No risotto-cooking hacks needed here, just follow our Mastering Risotto steps and tricks, and you’ll soon become a risotto master.</p>
<a href="2018/mastering-risotto.php"><button type="button" value="Read More" class="btn btn-info btn-lg center">Read More</button></a>
</div>
</div>
</div>
<div class="col-md-6 name content">
<!-- Feast of the Seven Fishes -->
<div class="thumbnail">
<img class="img-responsive" src="https://www.cento.com/images/articles/seven_fishes/christmas_fish.jpg" alt="Seven Fishes Dinner">
<div class="caption">
<h1 class="title">The Feast of<br>the Seven Fishes</h1>
<p class="blurb">The Feast of the Seven Fishes is an Italian tradition celebrated on Christmas Eve each year, with at least seven seafood courses eaten before midnight. Learn more about the symbolism of this feast and how to start your own Italian Christmas Eve tradition.</p>
<a href="2017/feast_seven_fishes.php"><button type="button" value="Read More" class="btn btn-info btn-lg center">Read More</button></a>
</div>
</div>
</div>
<div class="col-md-6 name content">
<!-- Traditional Panettone and Pandoro -->
<div class="thumbnail">
<img class="img-responsive" src="https://www.cento.com/images/articles/panettone_pandoro/panettone_featured.jpg" alt="Panettone">
<div class="caption">
<h1 class="title">Panettone and<br>Pandoro</h1>
<p class="blurb">Without Panettone and Pandoro at the table, it isn’t a true Italian Christmas celebration; these popular sweet breads are staples in every household during the holiday season. Learn more about the history of these cakes and what makes them so vital to celebrating.</p>
<a href="2017/traditional_panettone_pandoro.php"><button type="button" value="Read More" class="btn btn-info btn-lg center">Read More</button></a>
</div>
</div>
</div>
<div class="col-md-6 name content">
<!-- Torrone -->
<div class="thumbnail">
<img class="img-responsive" src="https://www.cento.com/images/articles/torrone/torrone-assorted.jpg" alt="Ferrara Torrone">
<div class="caption">
<h1 class="title">Torrone</h1>
<p class="blurb">A nougat made of honey, sugar and egg whites with toasted almonds, torrone is the most popular Italian candy and is made throughout all of Italy. Learn more about this beloved Italian nougat that inspired many of the commercial candy bars we know today.</p>
<a href="2017/torrone.php"><button type="button" value="Read More" class="btn btn-info btn-lg center">Read More</button></a>
</div>
</div>
</div>
<div class="col-md-6 name content">
<!-- Stock and Broth -->
<div class="thumbnail">
<img class="img-responsive" src="https://www.cento.com/images/articles/broth_stocks_safety/broth_stock_feature.jpg" alt="Stock and Broth">
<div class="caption">
<h1 class="title">Stock and Broth</h1>
<p class="blurb">Stock and broth are two similar items that are often confused as interchangeable ingredients. While, in some cases, they can be used interchangeably, it's important to note that there are differences between the two in both taste and use. Learn more about Cento Stocks, Cento Broths, and the best uses for each.</p>
<a href="2017/stock_broth.php"><button type="button" value="Read More" class="btn btn-info btn-lg center">Read More</button></a>
</div>
</div>
</div>
<div class="col-md-6 name content">
<!-- Maurizio Artisan Pasta -->
<div class="thumbnail">
<img class="img-responsive" src="https://www.cento.com/images/articles/maurizio_pasta_cuts/maurizio_top_down.jpg" alt="Maurizio Artisan Pasta">
<div class="caption">
<h1 class="title">Maurizio Artisan Pasta</h1>
<p class="blurb">Maurizio Artisan Pasta uses century-old, traditional Italian methods of production. Learn more about the steps that make our artisan pasta unique and why artisan pasta is widely regarded as the best.</p>
<a href="2017/maurizio_artisan_pasta.php"><button type="button" value="Read More" class="btn btn-info btn-lg center">Read More</button></a>
</div>
</div>
</div>
<div class="col-md-6 name content">
<!-- Mediterranean Diet -->
<div class="thumbnail">
<img class="img-responsive" src="https://www.cento.com/images/articles/meditteranean_diet/med_food.jpg" alt="Mediterranean Diet">
<div class="caption">
<h1 class="title">Mediterranean Diet</h1>
<p class="blurb">The Mediterranean Diet is considered the most heart-healthy diet by nutrition experts and doctors alike. The abundance of anti-inflammatory foods and healthy fats help reduce your risk of heart attack, stroke, type 2 diabetes and premature death. Learn more about the Mediterranean Diet and how to kickstart a healthier lifestyle with Cento.</p>
<a href="2017/mediterranean_diet.php"><button type="button" value="Read More" class="btn btn-info btn-lg center">Read More</button></a>
</div>
</div>
</div>
<div class="col-md-6 name content">
<!-- Heart Healthy Oil -->
<div class="thumbnail">
<img class="img-responsive" src="https://www.cento.com/images/carousel/featured/evoo_mobile.jpg" alt="Cento Heart Healthy Oil">
<div class="caption">
<h1 class="title">Heart Healthy Oil</h1>
<p class="blurb">Olive oil, a primary component of Italian cuisine, is considered one of the healthiest oils to cook with due to the health benefits when its used in place of saturated fats in your diet. Learn more about the health benefits of olive oil, ways to incorporate it into your everyday cooking, and conversions to use oil in place of butter while baking.</p>
<a href="2017/heart_healthy_oil.php"><button type="button" value="Read More" class="btn btn-info btn-lg center">Read More</button></a>
</div>
</div>
</div>
<div class="col-md-6 name content">
<!-- Cento Organics -->
<div class="thumbnail">
<img class="img-responsive" src="https://www.cento.com/images/articles/organics/organic_glam.png" alt="Cento Organics">
<div class="caption">
<h1 class="title">Cento Organics</h1>
<p class="blurb">At Cento, we recognize the importance of sustainability and protecting our environment. Our Organic products are produced without the use of pesticides and food additives in compliance with the USDA. Learn more about our line of organic products, our commitment to protecting our environment and our sustainable farming practices.</p>
<a href="2017/cento_organics.php"><button type="button" value="Read More" class="btn btn-info btn-lg center">Read More</button></a>
</div>
</div>
</div>
<div class="col-md-6 name content">
<!-- Olive Guide -->
<div class="thumbnail">
<img class="img-responsive" src="https://www.cento.com/images/articles/olives_guide/olive_glamour_main.jpg" alt="Olive Glamour">
<div class="caption">
<h1 class="title">Olive Guide</h1>
<p class="blurb">Olives have been enjoyed for thousands of years as the olive tree is one of the oldest trees ever harvested by humans. Equally diverse and versatile, olives are grown across the world and come in many different varieties that can be used to complement your favorite dishes. Our Olive Guide gives detailed information on our Cento olives, including their origin, taste and uses.</p>
<a href="2017/olive_guide.php"><button type="button" value="Read More" class="btn btn-info btn-lg center">Read More</button></a>
</div>
</div>
</div>
<div class="col-md-6 name content">
<!-- Whole Grain Guide -->
<div class="thumbnail">
<img class="img-responsive" src="https://www.cento.com/images/articles/whole_grain_guide/wholegrain_glamour.jpg" alt="Whole Grain Glamour">
<div class="caption">
<h1 class="title">Whole Grain Guide</h1>
<p class="blurb">Whole grains contain valuable antioxidants not found in fruits in vegetables, such as iron, fiber, magnesium, vitamin E and vitamin B. Eating whole grains can help reduce your risk of heart disease, stroke, diabetes and obesity, as well as lower your cholesterol. But, how do you know what foods are whole grain? Use our Whole Grains Guide to learn more about these important grains and our Anna Whole Grain Pasta cuts.</p>
<a href="2017/whole_grain_guide.php"><button type="button" value="Read More" class="btn btn-info btn-lg center">Read More</button></a>
</div>
</div>
</div>
<div class="col-md-6 name content">
<!-- Cento Tomato Guide -->
<div class="thumbnail">
<img class="img-responsive" src="https://www.cento.com/images/articles/tomato_guide/tomato_glamour.jpg" alt="Tomato Glamour Shot">
<div class="caption">
<h1 class="title">Canned Tomato Guide</h1>
<p class="blurb">With so many different varieties of canned tomatoes, sometimes it can be confusing trying to figure out which type is best for your recipe. From our Cento Certified San Marzano Tomatoes to our Cento Tomato Paste, we offer an extensive line of tomatoes to suit your culinary needs. Use our Canned Tomato Guide to understand the differences in texture and the best use for each type of Cento premium tomatoes.</p>
<a href="2017/canned_tomato_guide.php"><button type="button" value="Read More" class="btn btn-info btn-lg center">Read More</button></a>
</div>
</div>
</div>
<div class="col-md-6 name content">
<!-- Crushed Versatility -->
<div class="thumbnail">
<img class="img-responsive" src="https://www.cento.com/images/misc/crushed_versatility.jpg" alt="Crushed Versatility">
<div class="caption">
<h1 class="title">Crushed Versatility</h1>
<p class="blurb">Cento All Purpose Crushed Tomatoes are your "everything tomatoes", a pantry staple that is versatile enough to use in your favorite recipes. These vine-ripened tomatoes are picked, steam peeled and fresh packed to preserve freshness and flavor. Learn more about why Cento All Purpose Crushed Tomatoes are so popular and the many ways you can use them in your favorite dishes.</p>
<a href="2017/crushed_versatility.php"><button type="button" value="Read More" class="btn btn-info btn-lg center">Read More</button></a>
</div>
</div>
</div>
<div class="col-md-6 name content">
<!-- Cento Tuna Standards -->
<div class="thumbnail">
<img class="img-responsive" src="https://www.cento.com/images/articles/tuna_standards/tonna_albacore_glam.jpg" alt="Cento Tuna Standards">
<div class="caption">
<h1 class="title">Cento<br>Tuna Standards</h1>
<p class="blurb">Cento Tuna is wild caught, dolphin-safe and certified sustainable with complete traceability to wild capture fisheries by the Marine Stewardship Council. Learn more about our commitment to providing only the finest tuna loins and the steps we take to ensure our tuna is the highest quality available.</p>
<a href="2017/cento_tuna_standards.php"><button type="button" value="Read More" class="btn btn-info btn-lg center">Read More</button></a>
</div>
</div>
</div>
<div class="col-md-6 name content">
<!-- Cento Olive Oil Standards -->
<div class="thumbnail">
<img class="img-responsive" src="https://www.cento.com/images/articles/olive_oil_standards/oil_health.jpeg" alt="Cento Olive Oil Standards">
<div class="caption">
<h1 class="title">Cento<br>Olive Oil Standards</h1>
<p class="blurb">Our Quality Assurance mandates strict laboratory testing and extensive quality control tests to ensure our olive oil is just that, 100% olive oil made from only the finest olives. Cento Extra Virgin Olive Oil and all of the oils in our family of brands are rigorously tested and held to the highest of standards to ensure only the highest quality, authentic product is used by consumers.</p>
<a href="2017/cento_olive_oil_standards.php"><button type="button" value="Read More" class="btn btn-info btn-lg center">Read More</button></a>
</div>
</div>
</div>
<div class="col-md-6 name content">
<!-- Cento Steam Peeling Commitment -->
<div class="thumbnail">
<img class="img-responsive" src="https://www.cento.com/images/articles/steam_peeling_guide/steam_peeling.jpeg" alt="Cento Steam Peeling Commitment">
<div class="caption">
<h1 class="title">Cento Steam Peeling Commitment</h1>
<p class="blurb">For the past 50 years, we have continued to use an environmentally friendly steam peeling process for our tomatoes. We have always and will always continue to exemplify the highest industry quality and sustainability standards: using no chemical by-products, just hot water and the same process that has been used in Italy for centuries.</p>
<a href="2017/cento_steam_peeling_commitment.php"><button type="button" value="Read More" class="btn btn-info btn-lg center">Read More</button></a>
</div>
</div>
</div>
</div>
<!-- Articles Pagination Sub Container End -->
</div>
</div>
<!-- Articles End -->
</div>
</div>
</section>
<!-- Articles Row End -->
<!-- Pagination Controls -->
<section>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="pagination" style="float: right;"></div>
</div>
</div>
</div>
</section>
<!-- Pagination Controls End -->
</div>
<!-- Articles Pagination Container End -->
答案 0 :(得分：0)
使它起作用。在每个项目周围添加了部分，它开始起作用。不确定为什么。