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;">