Как реализовать поиск по сайту на js?

Question

нашел ролик, где идет реализация поиска на js, но там идет поиск по элементам li, там алгоритм такой, что все элементы не подходящие под поиск кроме самого слова скрываются, как правильно написать, чтоб скрывались только те блоки, которые не попали под поиск?

<style>
    .card {
        width: 150px;
        height: 120px;
        border:1px solid black;
        margin: 10px;
        
    }
    .card2 {
        width: 50px;
        height: 20px;
        border:1px solid red;
        
    }
    
    .card .hide{
       display: none; 
    }
</style>
<body>

    <input type="text" id="elastic">

    <div class="card">
        <div class="card2">
         <span>Black</span>   

        </div>
    </div>
    <div class="card">
        <div class="card2">
            <span>Red</span>
    
        </div>
    </div>
    <div class="card">
        <div class="card2">
            <span>White</span>
    
        </div>
    </div>
               
</body>
<script type="text/javascript">

    document.querySelector('#elastic').oninput = function () {
        let val = this.value.trim();
        let elasticItems = document.querySelectorAll('.card div');
        if (val != '') {
            elasticItems.forEach(function (elem) {
                if (elem.innerText.search((RegExp(val,"gi"))) == -1) {
                    elem.classList.add('hide');
                }
                else {
                    elem.classList.remove('hide');
                }
            });
        }
        else {
              elasticItems.forEach(function (elem) {
               
                    elem.classList.remove('hide');
                
              });
        }
    }
</script>

поиск происходит, но так же

Answer 1

Ваш код работает

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Pen</title>
        <style>
            .card {
                width: 150px;
                height: 120px;
                border: 1px solid black;
                margin: 10px;
            }
            .card2 {
                width: 50px;
                height: 20px;
                border: 1px solid red;
            }

            .card.hide {
                display: none;
            }
        </style>
    </head>
    <body>
        <input type="text" id="elastic" />

        <div class="card">
            <div class="card2">Black</div>
        </div>
        <div class="card">
            <div class="card2">Red</div>
        </div>
        <div class="card">
            <div class="card2">White</div>
        </div>

        <script type="text/javascript">
            const elastic = document.querySelector('#elastic')

            elastic.addEventListener('input', (ev) => {
                const value = ev.target.value.trim()
                const elasticItems = document.querySelectorAll('.card')
                const searchRegExp = new RegExp(value, 'gi')

                if (value === '') {
                    elasticItems.forEach((el) => {
                        el.classList.remove('hide')
                    })
                    return
                }

                elasticItems.forEach((el) => {
                    const innerCard = el.querySelector('.card2')
                    const elementText = innerCard.textContent
                    const isContainsSearchRequest = searchRegExp.test(elementText)
                    if (!isContainsSearchRequest) {
                        el.classList.add('hide')
                    } else {
                        el.classList.remove('hide')
                    }
                })
            })
        </script>
    </body>
</html>

БЛОГ НА HUSL

Как реализовать поиск по сайту на js?

Ответы (1 шт):