Kevin Powell - Community•2y ago

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

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

7 Replies

Chris Bolson•2y ago

I'm not 100% clear on what you want to achive but setting cardContainer.innerHTML = ''before you start the loop might be what you are looking for. Also, whilst not related to your issue, for this use case I think that you should be using forEach() rather than map() as you are not creating a new array or updating any array data.

Malik•2y ago

I want to get a preview like you get when u search on some sites showing the name and the image of the result. So basically that and yes your advice for card.Container.innerHTML = "" worked and I did change map to forEach(). Issue: but one of the issue I'm having is that result array that i get on input gives me a filtered array from data array. Let say i got data.length of 20. I insert a letter into the input and get 10 into my result array. if I keep adding more it furthur filters it but the issue is, like I have one single letter in the input and if i erase that it gives back the whole data array into result array but result array should be empty shouldn't it? I just tried giving space as input and it gives back the whole data array but I've replaced all the space than why is it doing that. So using space or erasing the one and only input letter gives back whole array.

Chris Bolson•2y ago

If your input is empty then you are not filtering anything out so I would expect you to get the whole array. You may want to update your function to only start returning results when you have at least 2 characters.

Malik•2y ago

can you show me here. I'm new to javascript and dont know how would i do that. would really appreciate or link me a site where I can read about it.

Unknown User•2y ago

Message Not Public

Malik•2y ago

ok ty for the help. I got one more question is if i type too fast or erase fast, i think the code gets overwhelmed and the cardContent.innerHTML = "" part skips and shows the previous result and fixes if you write more or erase normally. What would be the solution to that thing. I guess something that tell the code to wait i guess.

Chris Bolson•2y ago

You need to look into debouncing. Basically, as you say, wait a certain amount of time between each input before calling your function.

Gaming

Programming

Search Preview