Итак, я создал галерею с панелью поиска, но мне кажется, что я не могу настроить таргетинг на атрибуты заголовка изображений, чтобы можно было искать в изображениях таким образом. 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>