所以我创建了一个带有搜索栏的库，但我似乎无法针对图像的标题属性，所以我可以用这种方式在图像中搜索。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即可实现相同的功能，而无需使用其他插件，如隐藏查找。请参考以下代码
$(document).ready(function() {
$("#search").keyup(function() {
var filter = $(this).val();
$(".images").each(function() {
!$(this).attr("title").includes(filter) ? $(this).hide() : $(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>