使用纯 JavaScript 搜索过滤器，用于 HTML/CSS 中的图像网格

Question

我来自葡萄牙的亚速尔群岛，我正在做一个项目来展示亚速尔群岛的小径。我正在使用 html/css 中的图像网格来显示亚速尔群岛的一些旅游机构，但我对其中一个要求有疑问，用纯 JavaScript 构建了一个搜索过滤器来过滤岛屿的机构。如果有人可以帮助我，我将不胜感激，这是我的代码！

    <section class="oferta">

            <h1 class="titulo">Oferta Turística</h1>

            <div id="btn-container">

                <button class="btn-oferta active" onclick="selecaoFiltro('todas')">Mostrar Todas</button>

                <button class="btn-oferta active" onclick="selecaoFiltro('s-miguel')">São Miguel</button>

                <button class="btn-oferta active" onclick="selecaoFiltro('terceira')">Terceira</button>

                <button class="btn-oferta active" onclick="selecaoFiltro('graciosa')">Graciosa</button>

                <button class="btn-oferta active" onclick="selecaoFiltro('s-jorge')">São Jorge</button>

                <button class="btn-oferta active" onclick="selecaoFiltro('pico')">Pico</button>

                <button class="btn-oferta active" onclick="selecaoFiltro('faial')">Faial</button>

            </div>

            <div class="oferta-container">

                <div class="item filtro s-miguel">

                    <div class="oferta-item" style="background-image: url(imgs/oferta/azores_getaways.png"></div>

                    <h1>Azores Getaways - São Miguel</h1>

                    <h2>Contactos:</h2>

                    <a href="https://azoresgetaways.com/">WebSite - Azores Getaways</a>

                    <p>Email: - [e-mail]</p>

                    <p>Telefone: [phone]</p>

                </div>

                <div class="item filtro s-miguel">

                    <div class="oferta-item" style="background-image: url(imgs/oferta/melo_travel.png"></div>

                    <h1>Melo Travel - São Miguel</h1>

                    <h2>Contactos:</h2>

                    <a href="http://www.melotravel.com">WebSite - Melo Travel</a>

                    <p>Email: - [e-mail]</p>

                    <p>Telefone: [phone]</p>

                </div>