'In-page JS search not working in some pages

I'm using a simple JS in-page search on my Django web application. The problem is that it isn't working in some of the views for some reason. It works on the template created by GameListView but it doesn't work on the template created by GameListViewByDist. I'm not sure if it's relevant but both views are rendered on game_list.html which extends from base.html where the navbar search field is. Since both view codes are much alike i'm having a hard time finding the error. I appreciate any help.

**HTML**
**BASE.HTML**
<nav>  
   <input id="searchbox" type="search" placeholder="Search">
</nav>


**JS**
let type_timer;
let type_interval = 300;
let search_input = document.getElementById('searchbox');

search_input.addEventListener('keyup', () =>{
  clearTimeout(type_timer);
  type_timer = setTimeout(liveSearch, type_interval);
});

function liveSearch(){
  let cards = document.querySelectorAll('.game_card');
  let search_query = document.getElementById("searchbox").value;

  // SHOW MATCHES AND HIDE THE REST
  for (var i = 0; i < cards.length; i++){
    if(cards[i].innerText.toLowerCase().includes(search_query.toLowerCase())){
      cards[i].classList.remove("is_hidden");
    } else{
      cards[i].classList.add("is_hidden");
    }
  }
}



**VIEWS.PY**
class GameListView(SortableListMixin, ListView):
    sort_fields = [('name'), ('purchase_date')]
    model = models.Game
    ordering = ['-purchase_date']

    def get_context_data(self, **kwargs):
        context = super(GameListView, self).get_context_data(**kwargs)
        context.update({
            'tag_list': models.Tag.objects.all(),
        })
        return context


class GameListViewByDist(ListView):
    def get_queryset(self):
        self.distributor = get_object_or_404(models.Distributor, pk=self.kwargs['distributor'])
        return models.Game.objects.filter(gamestatus__distributor=self.distributor)

    def get_context_data(self, **kwargs):
        context = super(GameListViewByDist, self).get_context_data(**kwargs)
        context.update({
            'tag_list': models.Tag.objects.all(),
        })
        return context



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source