搜索欄實現

Question

我正在使用 JS 構建動態生成的卡片，我從 Firebase 獲取信息，生成卡片並且每個卡片里面都有不同的內容。

我在制作功能性搜索欄時遇到問題，我的目標是根據卡片的描述 (descricao) 過濾卡片。 如果搜索輸入的任何部分與描述中的某些內容匹配，則該卡必須可見。 當我運行代碼時，我沒有收到任何錯誤，但搜索不起作用。 所有卡都正常加載，就像沒有進行過濾嘗試一樣。

請看一下我的代碼。 感謝您的時間。

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();