Внутристраничный JS-поиск не работает на некоторых страницах
Я использую простой JS-поиск на странице в моем веб-приложении Django. Проблема в том, что он почему-то не работает в некоторых представлениях. Он работает в шаблоне, созданном GameListView, но не работает в шаблоне, созданном GameListViewByDist. Я не уверен, что это имеет значение, но оба вида отображаются на game_list.html, который расширяется из base.html, где находится поле поиска navbar. Поскольку оба кода представления очень похожи, мне трудно найти ошибку. Буду признателен за любую помощь.
**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