CODE SNIPPETS

Caixa de busca instantânea (filtro) na página

Início / Code Snippets / Caixa de busca instantânea (filtro) na página

Este código JavaScript altera dinamicamente a visibilidade de elementos de títulos com base na entrada de texto do usuário em um campo de busca. Conforme o usuário digita, os títulos que não correspondem aos termos de busca são ocultados, oferecendo um feedback instantâneo para a pesquisa.

Primeiro, adicione este código JavaScript:

document.addEventListener('DOMContentLoaded', function() {
        
        // ID do campo de busca (searchInput):
        // Altere o ID searchInput para o ID do seu campo de busca, se for diferente
        var searchInput = document.getElementById('searchInput');

        function normalizeText(text) {
            return text.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();
        }

        searchInput.addEventListener('keyup', function() {
            var searchValue = normalizeText(this.value);
            
            // Classe dos elementos a serem filtrados (.gb-headline):
            // Modifique a classe .gb-headline para a classe que corresponde aos elementos que você deseja filtrar
            var snippets = document.querySelectorAll('.gb-headline'); 

            // Classe do elemento de título (.gb-headline-text):
            // Atualize a classe .gb-headline-text para a classe do elemento de título dentro dos // elementos a serem filtrados, se necessário
            snippets.forEach(function(snippet) {
                var title = snippet.querySelector('.gb-headline-text'); 

                if (title) {
                    var titleText = normalizeText(title.textContent);
                  
                    var isMatch = searchValue.split(/\s+/).every(word => titleText.includes(word));

                    snippet.style.display = isMatch ? '' : 'none';
                }
            });
        });

Depois, basta adicionar este campo HTML na área do seu site onde deseja habilitar a funcionalidade de busca. Neste caso, o ID utilizado foi “searchInput“.

<input type="text" id="searchInput" placeholder="Buscar snippets..." style="width: 100%; padding: 10px; margin-bottom: 20px;">