简体   繁体   中英

Searchbar implementation

I'm building dynamically generated cards with JS where i get the information from Firebase, generate the cards and each have different content inside.

I'm having trouble making a functional searchbar where my objective is to filter the cards, based on the description (descricao) of the card. If any part of the search input matches something from the description the card must be visible. When i run the code im not getting any errors but the search is not working. All the cards are loaded normally like no filter attempt was made.

Please take a look at my code. Thank you for your time.

import { getWikiTI } from '../Models/prevenirWiki.js'

const dataCard = document.getElementById('data');

let arrayBusca = [];

async function loadData() {
  let i = 0;
  const data = await getWikiTI()

  dataCard.innerHTML = data.map(d => `
    <div class="card border-primary mb-3 fb-item" id="cardVisibility" style="max-width: 20rem;">
    <div class="card-header">${d.setor}</div>
    <div class="card-body">
      <h4 class="card-title">${d.descricao}</h4>
      <button type="button" class="btn btn-lg btn-primary" id="carregar-card${i++}">Carregar</button>
      <p hidden class="card-text">${d.conteudo}</p>
    </div>
  </div>
   `,
  ).join('')

  arrayBusca.push = data.map(d => d.descricao)
  console.log(arrayBusca);


  for (let i = 0; i <= data.length; i++) {
    let btnCarregar = document.getElementById(`carregar-card${i}`)

    btnCarregar.addEventListener('click', () => {

      dataCard.innerHTML = data[i].conteudo;

      dataCard.style.backgroundImage = "none";

      document.body.appendChild(dataCard);

    

    })
  }

  let btnBuscar = document.getElementsByClassName('btnBuscar')

  btnBuscar.addEventListener('click', () => {

  let input = document.getElementsByClassName('form-control').value
  input = input.toLowerCase();
  let x = arrayBusca;

  for (i = 0; i <= x.length; i++) {
    if(!x[i].toLowerCase().includes(input)) {
      document.getElementById('cardVisibility').style.visibility = 'hidden';
    }
  }
})

}

document.onload = loadData();

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM