因此，我创建了一个带有搜索栏的画廊，但似乎无法定位图像的标题属性，因此我可以以这种方式在图像中进行搜索。 IE，以我要在搜索栏中输入的第一张图片为目标“我喜欢干草”。显示第一张图片。每次我输入时，它都会使所有图像消失。到目前为止，这是我的代码：
$(document).ready(function () {
$('#search').hideseek({
attribute: 'title',
hidden_mode: false,
highlight: true
});
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Photo Gallery</title>
<link rel="stylesheet" href="magnific-popup/magnific-popup.css" />
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<input id="search" name="search" type="text" placeholder="Search(16pt)" data-list=".container">
<div class="container">
<a href="photos/01.jpg"><img src="photos/thumbnails/01.jpg" alt="Hay bales" title="I love hay bales. Took this snap on a drive through the countryside past some straw fields."></a>
<a href="photos/02.jpg"><img src="photos/thumbnails/02.jpg" alt="Lake" title="The lake was so calm today. We had a great view of the snow on the mountains from here."></a>
<a href="photos/03.jpg"><img src="photos/thumbnails/03.jpg" alt="Canyon" title="I hiked to the top of the mountain and got this picture of the canyon and trees below."></a>
<a href="photos/04.jpg"><img src="photos/thumbnails/04.jpg" alt="Iceberg" title="It was amazing to see an iceberg up close, it was so cold but didn’t snow today."></a>
<a href="photos/05.jpg"><img src="photos/thumbnails/05.jpg" alt="Desert" title="The red cliffs were beautiful. It was really hot in the desert but we did a lot of walking through the canyons."></a>
<a href="photos/06.jpg"><img src="photos/thumbnails/06.jpg" alt="Fall" title="Fall is coming, I love when the leaves on the trees start to change color."></a>
<a href="photos/07.jpg"><img src="photos/thumbnails/07.jpg" alt="Plantation" title="I drove past this plantation yesterday, everything is so green!"></a>
<a href="photos/08.jpg"><img src="photos/thumbnails/08.jpg" alt="Dunes" title="My summer vacation to the Oregon Coast. I love the sandy dunes!"></a>
<a href="photos/09.jpg"><img src="photos/thumbnails/09.jpg" alt="Countryside Lane" title="We enjoyed a quiet stroll down this countryside lane."></a>
<a href="photos/10.jpg"><img src="photos/thumbnails/10.jpg" alt="Sunset" title="Sunset at the coast! The sky turned a lovely shade of orange."></a>
<a href="photos/11.jpg"><img src="photos/thumbnails/11.jpg" alt="Cave" title="I did a tour of a cave today and the view of the landscape below was breathtaking."></a>
<a href="photos/12.jpg"><img src="photos/thumbnails/12.jpg" alt="Bluebells" title="I walked through this meadow of bluebells and got a good view of the snow on the mountain before the fog came in."></a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="magnific-popup/jquery.magnific-popup.js"></script>
<script src="js/app.js"></script>
<script type="text/javascript" src="js/jquery.hideseek.min.js"></script>
<script src="js/search.js"></script>
</body>
</html>您仅可以使用jQuery实现相同的功能，无需使用其他插件（例如hide seek）。请参考下面的代码
$(document).ready(function() {
$("#search").keyup(function() {
var filter = $(this).val();
$(".images").each(function() {
if (!$(this).attr("title").includes(filter)) {
$(this).hide();
} else {
$(this).show();
}
if (filter == "") {
$(this).show();
}
});
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Photo Gallery</title>
<link rel="stylesheet" href="magnific-popup/magnific-popup.css" />
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<input id="search" name="search" type="text" placeholder="Search(16pt)" data-list=".container">
<div class="container">
<a href="photos/01.jpg"><img class="images" src="photos/thumbnails/01.jpg" alt="Hay bales" title="I love hay bales. Took this snap on a drive through the countryside past some straw fields."></a>
<a href="photos/02.jpg"><img class="images" src="photos/thumbnails/02.jpg" alt="Lake" title="The lake was so calm today. We had a great view of the snow on the mountains from here."></a>
<a href="photos/03.jpg"><img class="images" src="photos/thumbnails/03.jpg" alt="Canyon" title="I hiked to the top of the mountain and got this picture of the canyon and trees below."></a>
<a href="photos/04.jpg"><img class="images" src="photos/thumbnails/04.jpg" alt="Iceberg" title="It was amazing to see an iceberg up close, it was so cold but didn’t snow today."></a>
<a href="photos/05.jpg"><img class="images" src="photos/thumbnails/05.jpg" alt="Desert" title="The red cliffs were beautiful. It was really hot in the desert but we did a lot of walking through the canyons."></a>
<a href="photos/06.jpg"><img class="images" src="photos/thumbnails/06.jpg" alt="Fall" title="Fall is coming, I love when the leaves on the trees start to change color."></a>
<a href="photos/07.jpg"><img class="images" src="photos/thumbnails/07.jpg" alt="Plantation" title="I drove past this plantation yesterday, everything is so green!"></a>
<a href="photos/08.jpg"><img class="images" src="photos/thumbnails/08.jpg" alt="Dunes" title="My summer vacation to the Oregon Coast. I love the sandy dunes!"></a>
<a href="photos/09.jpg"><img class="images" src="photos/thumbnails/09.jpg" alt="Countryside Lane" title="We enjoyed a quiet stroll down this countryside lane."></a>
<a href="photos/10.jpg"><img class="images" src="photos/thumbnails/10.jpg" alt="Sunset" title="Sunset at the coast! The sky turned a lovely shade of orange."></a>
<a href="photos/11.jpg"><img class="images" src="photos/thumbnails/11.jpg" alt="Cave" title="I did a tour of a cave today and the view of the landscape below was breathtaking."></a>
<a href="photos/12.jpg"><img class="images" src="photos/thumbnails/12.jpg" alt="Bluebells" title="I walked through this meadow of bluebells and got a good view of the snow on the mountain before the fog came in."></a>
</div>
</body>
</html>