Executando verificação de segurança...
1
ThauanMelo
2 min de leitura ·

[AJUDA] Barra de pesquisas

Olá pessoal, espero que vocês estejam bem. 😅

Vamos lá, acabei de ingressar na área da tecnologia e estou estagiando na área, foi passado para mim como um tipo de "desafio" para testar meus conhecimentos no Front-end.

O desafio seria o desenvolvimento de um catálogo web sobre o tema de minha prefêrencia e tinha apenas algumas obrigatoriedades para que esse site fosse considerado legível, e seriam:

• Responsividade
• O uso do HTML e CSS
• E os conteúdos orientados como um catálogo.

Resumindo, um projeto bem simples. Mas como eu disse anteriormente, acabei de entrar na área e queria fazer algo diferente, tanto pro meu aprendizado quanto para ganhar algum crédito ☺️

Eu fiz um catálogo voltado para a área da tecnologia, um site que trás cortes de podcasts que possa ajudar os profissionais da área, com dicas técnicas, soft skills e etc.

Enfim, quis fazer duas coisas que eu nunca havia feito antes, afinal, tenho pouco conhecimento técnico.

• Um menu Nav bar mobile responsivo (Deu trabalho mas consegui fazer e ficou MUITO MANEIRO) com menu hamburguer e etc.
• Uma barra de pesquisas que filtra os vídeos inseridos no site.

O projeto é pequeno e eu inseri apenas 10 vídeos e gostaria de fazer essa barra de pesquisas funcionar.

Ao contrário do que aconteceu com o menu nav bar, estou tendo certas dificuldades de encontrar conteúdos na internet que possa me ajudar, pois creio que por ter colocado vídeos incorporados do Youtube, talvez eu tenha que consumir a API do Google, alguém tem alguma dica que possa me ajudar?

Fiz algumas pesquisas utilizando o chat GPT mas tive certas dificuldades, todas as soluções ofertadas pelo Chat GPT não funcionaram. Alguém ja fez isso ou tem alguma dica que possa me ajudar?

Obrigado a todos e desejo um ótimo final de semana ❤️

PS: Caso alguém tenha interesse, posso disponibilizar o link do projeto no GITHUB.

Aceito críticas construtivas sobre o projeto e dicas de melhorias do código.

Carregando publicação patrocinada...
2
sammarxz

Bom, projeto interessante. Parabéns.

Pelo que entendi tu quer buscar em uma lista de vídeos do youtube, certo?
Suponho que esses vídeos estão em iframe, talvez por isso tu esteja com dificuldades pra fazer funcionar.

Mas para contornar isso, você pode colocar o título do vídeo em HTML puro e fazer a busca baseado nisso. por exemplo:

html:

<input type="text" id="searchBox" placeholder="Pesquisar por nome...">

<div id="videos">
  <div class="video">
    <h2>Video 1</h2>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID_1" frameborder="0" allowfullscreen></iframe>
  </div>
  <div class="video">
    <h2>Video 2</h2>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID_2" frameborder="0" allowfullscreen></iframe>
  </div>
  <div class="video">
    <h2>Video 3</h2>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID_3" frameborder="0" allowfullscreen></iframe>
  </div>
</div>

javascript:

const input = document.querySelector("#searchBox");
const videos = document.querySelectorAll(".video");

function searchVideos(filter) {
  [].forEach.call(videos, function(video) {
    const title = video.getElementsByTagName("h2")[0].textContent.toLowerCase();
    const iframe = video.getElementsByTagName("iframe")[0];
    const videoId = iframe.src.split("/").pop(); // obtém o ID do vídeo do link do iframe
    
    if (title.indexOf(filter) > -1) {
      video.style.display = "";
      iframe.src = "https://www.youtube.com/embed/" + videoId + "?autoplay=1"; // adiciona o parâmetro autoplay
    } else {
      video.style.display = "none";
      iframe.src = "https://www.youtube.com/embed/" + videoId; // remove o parâmetro autoplay
    }
  })
}

input.addEventListener("keyup", (event) => {
  const searchValue = event.target.value.toLowerCase();
  
  searchVideos(searchValue)
})

dessa forma estamos pegando o valor do input e comparando apenas com o título do vídeo que está em Html.

veja online no codepen:
https://codepen.io/sammarques/pen/VwGgBvM

espero ter ajudado!
ah! e compartilha aí o código no github

1
ThauanMelo
Autor
Autor

Muuuito Obrigado! ajudou demais!

Link do repositório: https://github.com/ThauanMelo/Tech-Clips
Link do site: https://thauanmelolpmodel.netlify.app

Só estou com algumas dúvidas, vi que o código funcionou perfeitamente no Codepen, No caso dos vídeos do meu site, se você puder dar uma olhadinha, alterei no JS as classes para as que eu defini no HTML, mas não funcionou :(

const input = document.querySelector(".search-input");
const videos = document.querySelectorAll(".card-content");

function searchVideos(filter) {
[].forEach.call(videos, function (video) {
const title = video.getElementsByTagName("p")[0].textContent.toLowerCase();
const iframe = video.getElementsByTagName("iframe")[0];
const videoId = iframe.src.split("/").pop();

// obtém o ID do vídeo do link do iframe

if (title.indexOf(filter) > -1) {
  video.style.display = "";
  iframe.src = "https://www.youtube.com/embed/" + videoId + "?autoplay=1"; // adiciona o parâmetro autoplay
} else {
  video.style.display = "none";
  iframe.src = "https://www.youtube.com/embed/" + videoId;
  // remove o parâmetro autoplay
}

});
}

input.addEventListener("keyup", (event) => {
const searchValue = event.target.value.toLowerCase();

searchVideos(searchValue);
});

0
2
sammarxz

desculpa man, não dá pra te ajudar sem saber o que tá acontecendo...

Tenta editar essa tua resposta pra colocar uma parte do HTML também, ou coloca lá no Codepen.

1
0
2
sammarxz

Tranquilo.

Cara, foi um errinho bobo no HTML na linha 137, saca só:

erro

tem uma " perdida lá.

resolvendo isso o código funciona.

Outra coisa que alterei foi a constante:

const videos = document.querySelectorAll(".card-item");

assim pegamos o elemento em si para podermos dar o display: none, se não ainda fica o box lá.

Codepen: https://codepen.io/sammarques/pen/zYJeJJm

1