Реализация функции поиска с каменной кладкой Десанро ⇐ Javascript

[Anonymous]

Я использовал эту статью CSS-Tricks, чтобы добавить функцию поиска на мою страницу; Он ищет изображения, используя текст ALT и скрывает любые изображения, которые не соответствуют запросу. Я также использую каменную кладку Desandro для отображения моих изображений. Технически все работает, но, поскольку я сами скрываю изображения, а не элемент div, содержащий их, между изображениями есть большое количество пустого пространства, когда пользователь вводит поисковый запрос. Но я не мог понять, как заставить его работать с задержкой Keyup (это еще одна часть функции поиска CSS-Tricks). < /p> javascript < /p>

Код: Выделить всё

Promise.all(Array.from(document.images).filter(img => !img.complete).map(img => new Promise(resolve => { img.onload = img.onerror = resolve; }))).then(() => { var elem = document.querySelector('.grid');
var msnry = new Masonry( elem, {
// options
itemSelector: '.grid-item', columnWidth: 210, gutter: 10, horizontalOrder: true});
});

let boxes = document.querySelectorAll('.image')

function liveSearch() {
let search_query = document.getElementById("searchbox").value;

for (var i = 0; i < boxes.length; i++) {
if (boxes[i].getAttribute('alt').toLowerCase()
.includes(search_query.toLowerCase())) {
boxes[i].classList.remove("is-hidden");
} else {
boxes[i].classList.add("is-hidden");
}
}
}

let typingTimer;
let typeInterval = 500;
let searchInput = document.getElementById('searchbox');

searchInput.addEventListener('keyup', () => {
clearTimeout(typingTimer);
typingTimer = setTimeout(liveSearch, typeInterval);
});
< /code>
html < /p>
⌕[/b]





[img]/images/img1.png[/img]

[img]/images/img2.png[/img]

[img]/images/img3.png[/img]
< /code>
css < /p>
#searchbox {
width: 300px;
color: #ffffff;
background-color: #000000;
border-radius: 4px;
padding: 5px;
}

.is-hidden { display: none; }

.grid-item {
width: 210px;
margin-bottom: 10px;
}

.grid:after {
content: '';
display: block;
clear: both;
}

Вот пример того, что происходит на jsfiddle
Я бы предпочел решение в ванили JS, если это возможно.

Подробнее здесь: https://stackoverflow.com/questions/797 ... os-masonry