页内 JS 搜索在某些页面中不起作用

Question

我在 Django Web 应用程序上使用简单的 JS 页内搜索。问题是由于某种原因它在某些视图中不起作用。它适用于 GameListView 创建的模板，但不适用于 GameListViewByDist 创建的模板。我不确定它是否相关，但两个视图都在从导航栏搜索字段所在的 base.html 扩展的 game_list.html 上呈现。由于两个视图代码非常相似，我很难找到错误。我很感激任何帮助。

**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