live-search

<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Ждем, пока весь контент загрузится, прежде чем выполнять скрипт

        const form = document.querySelector('.live-search'); // Находим форму с классом .live-search
        const input = form.querySelector('.search-input'); // Находим поле ввода с классом .search-input внутри формы
        const articleItems = document.querySelectorAll('.article-item'); // Находим все элементы с классом .article-item
        const noResult = document.querySelector('.resources-no-result'); // Находим поле блок с классом .resources-no-result

        if (form) {
            // Проверяем, существует ли форма
            form.addEventListener('submit', function (e) {
                e.preventDefault(); // Предотвращаем отправку формы, чтобы не перезагружать страницу
            });

            input.addEventListener('input', function () {
                // Добавляем обработчик события ввода в поле поиска
                const searchText = input.value.trim().toLowerCase(); // Получаем введенный текст и приводим его к нижнему регистру

                articleItems.forEach(articleItem => {
                    // Перебираем каждый элемент .article-item
                    const title = articleItem.querySelector('.article-title'); // Находим элемент заголовка с классом .article-title внутри .article-item
                    if (title) {
                        const titleText = title.textContent.trim().toLowerCase(); // Получаем текст заголовка и приводим его к нижнему регистру

                        if (titleText.includes(searchText)) {
                            // Если текст заголовка содержит введенный текст
                            articleItem.classList.add('show-block'); // Добавляем класс для отображения элемента
                            articleItem.classList.remove('hide-block'); // Удаляем класс скрытия элемента
                        } else {
                            // Если текст заголовка не содержит введенный текст
                            articleItem.classList.remove('show-block'); // Удаляем класс отображения элемента
                            articleItem.classList.add('hide-block'); // Добавляем класс скрытия элемента
                        }
                    }
                });

                let hasClassFlag = checkAllElementsHaveClass('show-block');

                if (!hasClassFlag) {
                    noResult.classList.remove('hide-block');
                } else {
                    noResult.classList.add('hide-block');
                }
            });

            function checkAllElementsHaveClass(hasClass) {
                const elements = articleItems;
                let allHaveClass = true;

                elements.forEach(element => {
                    if (!element.classList.contains(hasClass)) {
                        allHaveClass = false;
                    }
                });

                return allHaveClass;
            }
        }
    });
</script>