Во-первых, у меня почти нулевой опыт работы с html или js и т. Д. Пожалуйста, подумайте, что я нуб :) У меня есть автономный веб-сайт (в основном изображения, которые идут в направлениях, когда я нажимаю на них), но так как есть много изображений правильноТеперь я хочу добавить функцию поиска.
Это мой код -> https://jsfiddle.net/v3cjbyq7/
<html>
<head>
<style>
figure.image {
display: inline-block;
margin: 0px;
padding-top: 20px;
padding-bottom: 25px;
padding-right: 24px;
padding-left: 20px;
width:225px;
height:340px;
}
</style>
</head>
<body>
<div class="images">
<figure class="image">
<img src="Assets/x.png" alt="x";>
</figure>
<figure class="image">
<img src="Assets/xx.png" alt="xx";>
</figure>
<figure class="image">
<img src="Assets/xy.png" alt="xy";>
</figure>
<figure class="image">
<img src="Assets/xz.png" alt="xz";>
</figure>
</div>
<script src="random.js"></script>
</body>
</html>
(random.js это просто скрипт, который дает случайный порядокк изображениям)
Я нашел эту тему, которая дает мне почти то, что я хочу.
как реализовать функцию поиска с использованием Javascript или jquery
Это код -> http://jsfiddle.net/Mottie/ztaz6/2/
Есть 2 проблемы, которые мне нужнырешить в этом примере. Во-первых, я хочу адаптировать этот код к своему сайту, но то, что я пробовал, ничего не изменило. (честно говоря, я просто пробовал случайные вещи, надеясь, что это сработает)
Во-вторых, я хочу скрыть окно поиска. Я хочу создать что-то похожее на это -> https://youtu.be/aOkirKWrHbU?t=85 (извините, я не смог найти лучшего примера) Например, когда он пишет «sni», он только выделяет вещи с «sni» внутри. Подсветка идеальна, но скрывать ее тоже можно.
Спасибо за чтение, пожалуйста, не забудьте, что я полный нуб, отвечая (пожалуйста, ответьте: D)