не правильно работает поиск

поиск перестает нормально работать(может только находит последний елемент) когда я добавляю команду overlay.style.height = "100vh";если без нее или вынести из цикла то все работает хорошо, почему height не срабатывает внутри цикла?

при таком коде работает поиск отлично

 $("#headerSearchInput").keyup(function() {
            var input, filter, container, elem, i, place, overlay;
            overlay = document.getElementById("headerSearchOverlay");
            input = this;
            filter = input.value.toUpperCase();
            container = document.getElementById("headerSearchResult");
            elem = container.getElementsByClassName("search-outcome-item");
            for (i = 0; i < elem.length; i++) {
                place = elem[i].getElementsByClassName("name")[0];
                if (place.innerHTML.toUpperCase().indexOf(filter) > -1 && filter.length > 0) {
                    elem[i].style.display = "block";
                } else {
                    elem[i].style.display = "none";
                }
            }
        });

нужный, но не рабочий вариант

$("#headerSearchInput").keyup(function() {
        var input, filter, container, elem, i, place, overlay;
        overlay = document.getElementById("headerSearchOverlay");
        input = this;
        filter = input.value.toUpperCase();
        container = document.getElementById("headerSearchResult");
        elem = container.getElementsByClassName("search-outcome-item");
        for (i = 0; i < elem.length; i++) {
            place = elem[i].getElementsByClassName("name")[0];
            if (place.innerHTML.toUpperCase().indexOf(filter) > -1 && filter.length > 0) {
                elem[i].style.display = "block";
                overlay.style.height = "100vh";
            } else {
                elem[i].style.display = "none";
                overlay.style.height = 0;
            }
        }
    });