Django - получение результата автозаполнения поиска из 2 моделей

Я написал функцию, которая позволяет пользователям искать названия в моей модели Product и Article. Я использую библиотеку trevoreyre autocomplete-js для обработки автозаполнения живого поиска. Я сделал это с успехом, но только с 1 моделью - Article

Проблема, с которой я сейчас сталкиваюсь, заключается в том, что я хочу включить названия из Article и Product моделей в строку автозаполнения поиска.

JsonResponse не принимает контекст в качестве параметра, поэтому мой вопрос заключается в том, как я могу включить поле title из обеих моделей без параметров контекста?

views.py

from product.models import Product
from articles.models import Article
from django.db.models import Q
from django.contrib.auth.decorators import login_required
from django.shortcuts import render
from django.http import JsonResponse


@login_required
def search_address(request):
    title = request.GET.get('title')
    payload = []
    if title:
        address_objects = Article.objects.filter(title__icontains=title)
        
        for address_object in address_objects:
            payload.append(address_object.title)
    return JsonResponse({'status':200, 'data': payload})


@login_required
def search_results(request):
    query = request.GET.get('q')
    article = Article.objects.all()
    product = Product.objects.all()
    if query is not None:
        lookups = Q(title__icontains=query)
        article = Article.objects.filter(lookups)
        product = Product.objects.filter(lookups)
    context = {
        'article_list': article,
        'product_list': product
    }
    return render(request, 'search/search_view.html', context)

base.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="Starlab platform" />
<meta name="author" content="Pathfinder 23" />
<title>Starlab - {% block title %}{% endblock %}</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
  integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
 <link rel="stylesheet" href="https://unpkg.com/@trevoreyre/autocomplete-js/dist/style.css"/>
</head>
<body>
<form action="{% url 'search_results' %}" method="get" id="search">
    {% csrf_token %}
    <div class="searchbar" id="autocomplete">
    <input name="q" type="text" placeholder="Search..." class="search_input">
    <a href="{% url 'search_results' %}" class="search_icon"><i class="fas fa-search"></i></a>
    <ul class="autocomplete-result-list"></ul>
    </div>
  </form>
</body>


<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
  integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
  integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous">
</script>

<script src="https://unpkg.com/@trevoreyre/autocomplete-js"></script>

<script>
  new Autocomplete('#autocomplete', {
    search : input =>{
      console.log(input)
      const url = `/search/?title=${input}`
      return new Promise(resolve =>{
        fetch(url)
        .then(response => response.json())
        .then(data => {
          console.log(data)
          resolve(data.data)
        })
      })
    },
    onSubmit: result => {
      console.log(result)

    }
  })
</script>
Вернуться на верх