I'm currently working on creating a dynamic filter bar integrated with a search functionality. My data is stored in JSON format, including details such as artist name, title, source, and more. Despite successfully retrieving results through console.log, I am facing challenges in displaying them within the search result box.

const results = document.querySelector(".search-results");
for (let i = 0; i < allMusic.length; i++) {
  let result = `<li li-index="${i + 1}" onclick="clicked(this)">
                <div class="result-box">
                  <div class="result-box-cover">
                  <h1 class="result-name">${allMusic[i].name}</h1>
                  <p class="result-artist">${allMusic[i].artist}</p>
                  </div>
                </div>
                <audio class="${allMusic[i].src}" src="songs/${allMusic[i].src}.mp3"></audio>
              </li>`;
  results.insertAdjacentHTML("beforeend", result);
}

function searchName() {
  input = document.getElementById('search-item');
  filter = input.value.toUpperCase();
  ul = document.getElementsByClassName("search-results");
  li = document.querySelectorAll('.search-results li');

  for (i = 0; i < li.length; i++) {
    nameResult = li[i].getElementsByClassName("result-name")[0];
    artistResult = li[i].getElementsByClassName("result-artist")[0];
    webkitresults = document.getElementsByClassName("search-results")[0];
    nameResult = nameResult.textContent || nameResult.innerText;
    artistResult = artistResult.textContent || artistResult.innerText;
    if (nameResult.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
      li[i].style.visibility = "visible";
      webkitresults.classList.remove("webkit-hidden");
    }
    else if (artistResult.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
      li[i].style.visibility = "visible";
      webkitresults.classList.remove("webkit-hidden");
    }
    else {
      li[i].style.display = "none";
      li[i].style.visibility = "hidden";
    }


    if (input.value.length == 0)
    {
      li[i].style.visibility = "hidden";
      webkitresults.classList.add("webkit-hidden");
    }
  }
}

function filterByName() {
  if (filterStatus.classList.contains("Hip-Hop")) {
    var result = allMusic.filter((x)=>x.style === "Hip-Hop");
    console.log(result);
  }
  if (filterStatus.classList.contains("Energic")) {
    var result = allMusic.filter((x)=>x.style === "Energic");
    console.log(result);
  }
}

function filterName(x) {
  filterStatus = document.querySelector(".search-filter");
  if (x==1)
  {
      filterStatus.classList.toggle("Hip-Hop");
      filterByName();
  }
  if (x==2)
  {
      filterStatus.classList.toggle("Energic");
      filterByName();
  }
  if (x==3)
  {
      filterStatus.classList.toggle("Workout");
      filterByName();
  }
  if (x==4)
  {
      filterStatus.classList.toggle("Chill");
      filterByName();
  }
  if (x==5)
  {
      filterStatus.classList.toggle("Sad-Lofi");
      filterByName();
  }
  if (x==6)
  {
      filterStatus.classList.toggle("Rock");
      filterByName();
  }
}

The JSON file serves as a database for the search/filter functionality.

{
      name: "Havana",
      artist: "Camila Cabello",
      src: "CamilaCabelloHavana",
      img: "CamilaCabelloHavana",
      style: "Energic",
      status: "",
  },
  {
      name: "Dj Is Your Second Name",
      artist: "C-Bool , Giang Pham",
      src: "C-BooLDJ",
      img: "C-BooLDJ",
      style: "Energic",
      status: "",
  },
  {
      name: "Never Go Away",
      artist: "C-Bool",
      src: "C-BooL-NeverGoAway",
      img: "C-BooL-NeverGoAway",
      style: "Energic",
      status: "",
  },
  {
      name: "Champions",
      artist: "Kevin Rudolf",
      src: "KevinRudolf-Champions",
      img: "KevinRudolf-Champions",
      style: "Energic",
      status: "",
  },
  {
      name: "Ride It",
      artist: "DJ Regard",
      src: "DJRegard-Rideit",
      img: "DJRegard-Rideit",
      style: "Energic",
      status: "",
  },

  <div class="search-content">

    <h1>What are you looking for?</h1>
    <div class="search-bar">
      <input type="text" id="search-item" placeholder="Artists, Tracks" onkeyup="searchName()">
        <div class="clear-btn">
        <button type="button" id="clear-input-btn" onclick="ClearFields();searchName();"><i class="fa-solid fa-xmark"></i></button>
        </div>
   </div>

  </div>

  <div class="search-filter" id="filterBox">

      <div class="search-item" onclick="filterName(1)">
        <p>Hip-Hop</p>
      </div>
      <div class="search-item" onclick="filterName(2)">
        <p>Energetic</p>
      </div>
      <div class="search-item" onclick="filterName(3)">
        <p>Workout</p>
      </div>
      <div class="search-item" onclick="filterName(4)">
        <p>Chill</p>
      </div>
      <div class="search-item" onclick="filterName(5)">
        <p>Sad-Lofi</p>
      </div>
      <div class="search-item" onclick="filterName(6)">
        <p>Rock</p>
      </div>

  </div>

  <div class="search-results">



  </div>


</div>