Kevin Powell - CommunityKP-C
Kevin Powell - Community•3y ago•
11 replies
Malik

Search Preview

I'm trying to make a searchbar using json data and want to show the result preview of the result depending on the input. I've been successful in using filter() to get an array and now want to use that data to show the preview like image, name etc & I've done it but,
Problem:
The issue is after the first input whatever array i get the preview uses that and doesn't matter after that whatever input I used it doesn't use the furthur filtered down array. Like it's now continuously not using the result array, just on the first input.
Issue found: (need new solution)
it does use the current result and shows the preview as i want now the issue is it does it under the previous preview and doesn't resets it. How should I get it to reset or remove the previous html on every input
const SearchResultCard = document.querySelector("template");
const cardContainer = document.querySelector("[data-contianer]");
const search = document.querySelector(".search_bar");


search.addEventListener("input" , (e) => {
fetch("../../data.json")
.then(res => res.json())
.then(data => showInfo(data));

  const value = e.target.value.toLowerCase().replace(/ /g, '')
  
  function showInfo(data){
  const result = data.filter(
      filtered => {
        return filtered.Name.toLowerCase().replace(/ /g, '').includes(value);
      })

      console.log(result)
    result.map(cards => {
    const previewCard = SearchResultCard.content.cloneNode(true).children[0]
    const image = previewCard.querySelector("[data-image]")
    const name = previewCard.querySelector("[data-name]")
    const url = previewCard.querySelector("[data-pageUrl]")
    image.src = cards.Image
    image.alt = cards.Image_Alt
    name.textContent = cards.Name
    url.href = cards.slug
    cardContainer.append(previewCard)
    })
  }
  });
Was this page helpful?