Добавление функции "показать все" в поиск django с помощью js/ajax, если результаты > 5

У меня есть простая функциональность поиска на django, использующая js/ajax. Я хочу добавить функциональность, чтобы когда набор запросов больше 5, в результатах поиска появлялся href 'Показать все' и перенаправлял на страницу со всеми запросами.

Это для случая, когда набор запросов возвращает большое количество результатов, а не располагает их в одной большой коробке.

Я думал, что могу просто добавить словарь к моему набору запросов, например data.append({'pk': <add number to querset>, 'name': 'Show all results'}) , но потом я думаю, что это запутает логику js с циклом forEach.

Я бы хотел, чтобы каждый результат поиска до 5 ссылался на детальное представление, но затем последний должен ссылаться на совершенно другое представление.

Я не уверен, что здесь лучший вариант.

Мой поиск в views.py:

def search_results(request):
    """
    Handles search logic
    """
    if request.is_ajax():
        res = None
        quote = request.POST.get('quote')
        qs = Quote.objects.filter(name__icontains=quote)
        if len(qs) > 0 and len(quote) > 0:
            data = []
            for pos in qs:
                item = {
                    'pk': pos.pk,
                    'name': pos.name,
                    'image': str(pos.image.url)
                }
                data.append(item)
            res = data
        else:
            res = 'No quotes found...'

        return JsonResponse({'data': res})
    return JsonResponse({})

и main.js, который обрабатывает загрузку результатов поиска:

const url = window.location.href
const searchForm = document.getElementById('search-form')
const searchInput = document.getElementById('search-input')
const resultsBox = document.getElementById('results-box')

const csrf = document.getElementsByName('csrfmiddlewaretoken')[0].value

const sendSearchData = (quote) => {
    $.ajax({
        type: 'POST',
        url: 'search/',
        data: {
            'csrfmiddlewaretoken': csrf,
            'quote': quote,
        },
        success: (res)=> {
            console.log(res.data)
            const data = res.data
            let length = data.length
            console.log(length)
            if (Array.isArray(data)) {
                resultsBox.innerHTML = ""
                data.forEach(quote=> {
                    resultsBox.innerHTML += `
                        <a href="${url}${quote.pk}" class="item">
                            <div class="row mt-2 mb-2">
                                <div class="col-2">
                                    <img src="${quote.image}" class="quote-img">
                                </div>
                                <div class="col-10">
                                    <h5>${quote.name}</h5>
                                    <p class="text-muted">${quote.seller}</p>
                                </div>
                            </div>
                        </a>
                    `
                })
            } else {
                if (searchInput.value.length > 0) {
                    resultsBox.innerHTML = `<b>${data}</b>`
                } else {
                    resultsBox.classList.add('not-visible')
                }
            }
            error: (err)=> {
                console.log(err)
            }
        }
    })
}


searchInput.addEventListener('keyup', e=>{
    console.log(e.target.value)

    if (resultsBox.classList.contains('not-visible')){
        resultsBox.classList.remove('not-visible')
        }

    sendSearchData(e.target.value)
})

Вернуться на верх