Django - Необходимо руководство по фильтрации данных по ключевым словам

В моем проекте веб-приложения есть страница для расширенного поиска. Изначально на ней должны отображаться все элементы из базы данных. Из интерфейса администратора для каждого элемента я добавил ключевые слова, разделенные запятыми. Я хочу отфильтровать товары на FE по этим ключевым словам. Пример: вино имеет такие ключевые слова, как: красное, сухое. Когда я нажимаю на один из этих вариантов на front-end, должны быть показаны соответствующие вина. Я создал шаблон, добавил виды и немного javascript, но теперь я застрял и не понимаю, где отсутствует логика.

Вот шаблонный фрагмент:

    <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
            Filter
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton" id="filterOptions">
        <li><a class="dropdown-item" href="#" data-keyword="red">Red</a></li>
        <li><a class="dropdown-item" href="#" data-keyword="sparkling">Sparkling</a></li>
        <li><a class="dropdown-item" href="#" data-keyword="white">White</a></li>
        <li><a class="dropdown-item" href="#" data-keyword="sweet">Sweet</a></li>
        <li><a class="dropdown-item" href="#" data-keyword="dry">Dry</a></li>
        <li><a class="dropdown-item" href="#" data-keyword="citrus">Citrus</a></li>
        </ul>
    </div>
    <section class="products section-padding">
        <div class="container">
            <div class="row">
                {% for wine in page_obj %}
                <div class="col-lg-4 col-12 mb-3">
                    <div class="product-thumb">
                        <a href="product-detail.html">
                            <img src="{{ MEDIA_URL }}{{ wine.image.url }}" class="img-fluid product-image" alt="">
                        </a>

                        <div class="product-info d-flex">
                            <div>
                                <h5 class="product-title mb-0">
                                    <a href="product-detail.html" class="product-title-link">{{ wine.name }}</a>
                                </h5>

                            <p class="product-p">{{ wine.description }}</p>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

<div class="pagination">
    <span class="step-links">
        {% if page_obj.has_previous %}
            <a href="?page=1">&laquo; first</a>
            <a href="?page={{ page_obj.previous_page_number }}">previous</a>
        {% endif %}

        <span class="current">
            Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.
        </span>

        {% if page_obj.has_next %}
            <a href="?page={{ page_obj.next_page_number }}">next</a>
            <a href="?page={{ page_obj.paginator.num_pages }}">last &raquo;</a>
        {% endif %}
    </span>
</div>

Вот "черновые" виды, которые еще предстоит обновить:

def wines_all(request):
    sparkling_wines_list = Wine.objects.all()
    paginator = Paginator(sparkling_wines_list, 9)

    page_number = request.GET.get('page')
    page_obj = paginator.get_page(page_number)

    return render(request, 'test.html', {'page_obj': page_obj})

def filter_wines(request):
    keyword = request.GET.get('keyword')
    if keyword:
        filtered_wines = Wine.objects.filter(keywords__contains=keyword)
    else:
        filtered_wines = Wine.objects.all()
    wines_data = [{'name': wine.name, 'description': wine.description, 'image': wine.image.url} for wine in filtered_wines]
    return JsonResponse(wines_data, safe=False)

И js-код:

 document.addEventListener('DOMContentLoaded', function () {
 const filterOptions = document.querySelectorAll('#filterOptions a');

 const wineList = document.getElementById('wineList');

 filterOptions.forEach(option => {

option.addEventListener('click', function (event) {

  event.preventDefault();

  const keyword = this.dataset.keyword;

  fetch(`/filter-wines/?keyword=${keyword}`)

    .then(response => response.json())

    .then(data => {

      wineList.innerHTML = '';

      data.forEach(wine => {

        wineList.innerHTML += `

          <div class="col-lg-4 col-12 mb-3">

            <div class="product-thumb">

              <a href="product-detail.html">

                <img src="{{ MEDIA_URL }}${wine.image.url}" class="img-fluid product-image" alt="">

              </a>

              <div class="product-info d-flex">

                <div>

                  <h5 class="product-title mb-0">

                    <a href="product-detail.html" class="product-title-link">${wine.name}</a>

                  </h5>

                  <p class="product-p">${wine.description}</p>

                </div>

              </div>

            </div>

          </div>

        `;

      });

    })

    .catch(error => console.error('Error fetching wines:', error));
      });
     });

       });

Я новичок в веб-разработке, особенно с Django, поэтому я просматриваю много учебников и ресурсов, так что это может быть все вокруг, был бы благодарен за некоторые исправления / руководство.

Примечание: То, чего я пытаюсь достичь, это возможность выбирать несколько вариантов и фильтровать данные на основе нескольких вариантов. Также для части ключевых слов я использую CharField, поэтому я думаю, что лучшим вариантом будет разделение строки запятыми, чтобы я мог получить ключевые слова в виде отдельных строк

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