Виджет Django autocomplete light Select2 не отображается

Я следовал учебнику DAL и могу получить доступ к объекту json по адресу

http://127.0.0.1:8000/entry/river-autocomplete/?q=S

Итак, я знаю, что мой вид работает. После этого я не могу получить ничего, кроме стандартного виджета для ForignKey. Из просмотра следующих сообщений в stackoverflow я чувствую, что некоторые статические файлы или библиотеки javascript не загружаются должным образом, но я не могу понять, как это исправить.

django-autocomplete-light template not rendering autocomplete widget

django-autocomplete-light отображает пустой выпадающий список в форме

Ниже приведены все файлы, которые, по моему мнению, относятся к этой проблеме. Если я могу прояснить ситуацию, пожалуйста, дайте мне знать.

views.py

#autocomplete view
class RiverAutocomplete(autocomplete.Select2QuerySetView):
    def get_queryset(self):
        #User filtering code goes here
        if not self.request.user.is_authenticated:
            return River.objects.none()
        
        qs = River.objects.all()

        if self.q:
            qs = qs.filter(river_name__istartswith=self.q)
        return qs

models.py

class River(models.Model):
    river_name = models.CharField(max_length=50)
    aw_id = models.CharField(max_length=20)
    state = models.CharField(max_length=5) 

    def __str__(self):
        return "{river}".format(river=self.river_name)


class JournalEntry(models.Model):
    user = models.ForeignKey(User, on_delete=models.CASCADE)
    date = models.DateField()
    river = models.ForeignKey("River", on_delete=models.CASCADE)
    flow = models.FloatField()
    description = models.TextField(max_length=250)
    public = models.BooleanField(default=False)
    # picture = models.ImageField()

    def __str__(self):
        return "{river}--{date}".format(river=self.river, date=self.date)

forms.py

from django import forms
from . import models
from .widgets import FengyuanChenDatePickerInput
from dal import autocomplete

class JournalForm(forms.ModelForm):
    date = forms.DateField(input_formats=['%m/%d/%Y'], widget=FengyuanChenDatePickerInput())
    river = forms.ModelChoiceField(
        queryset=models.River.objects.all(),
        widget=autocomplete.ModelSelect2(url='journal:river-autocomplete'))

    class Meta:
        model = models.JournalEntry
        fields = ("__all__")

urls.py

from django.urls import path
from django.conf.urls import url

from . import views

app_name='journal'

urlpatterns = [
    ...
    ...
    #autocomplete view
    url(r'^river-autocomplete/$', views.RiverAutocomplete.as_view(model=River, create_field='name'), name='river-autocomplete'),
   
]

html

{% extends "base.html" %}
{% load static %}
{% block content %}

<div class="container">
    <h1>New Entry:</h1>

    
    <form method="post">
      
      {% csrf_token %}
        <h3>Date:</h3>
        {{ form.date}}
        <h3>River:</h3>
        {{ form.river }}
        <h3>Flow:</h3>
        {{ form.flow }}
        <h3>Description:</h3>
        {{ form.description }}
        <h4>Public:  {{ form.public }}</h4>

        
        <input type="submit" value="Save">
      

      
  </form>
</div>

{% endblock %}

{% block footer %}
<!-- DAL -->
<script type="text/javascript" src="{% static 'admin/js/vendor/jquery/jquery.js' %}"></script>

{{ form.media }}

<script>
  (function($) {
      $('#id_river').click(function() {
          var index = $('#id_inline_test_models-TOTAL_FORMS').val()
          var newTable = $('#id_inline_test_models-__prefix__-DELETE').parents('table').clone()
          newTable.find(':input').each(function() {
              for (attr of ['name', 'id'])
                  $(this).attr(
                      attr,
                      $(this).attr(attr).replace('__prefix__', index)
                  )
          })
          newTable.insertBefore($(this))
          $('#id_inline_test_models-TOTAL_FORMS').val(
              parseInt($('#id_inline_test_models-TOTAL_FORMS').val()) + 1
          )
          newTable.slideDown()
      })
  })($)
  </script>

<!-- Datepicker  -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.js" integrity="sha256-/7FLTdzP6CfC1VBAj/rsp3Rinuuu9leMRGd354hvk0k=" crossorigin="anonymous"></script>

<script>
  $(function () {
    $("#id_date").datepicker({
      format:'dd/mm/yyyy',
    });
  });
</script>

{% endblock %}

base.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>American Whitewater Journal</title>
        

        <!-- Latest compiled and minified CSS -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
        
        
        <!-- jQuery -->
        <script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
        


        <!-- Fengyuan Chen's Datepicker -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.css" integrity="sha256-b88RdwbRJEzRx95nCuuva+hO5ExvXXnpX+78h8DjyOE=" crossorigin="anonymous" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.js" integrity="sha256-/7FLTdzP6CfC1VBAj/rsp3Rinuuu9leMRGd354hvk0k=" crossorigin="anonymous"></script>
    </head>
    <body>
        <nav class="navbar navbar-expand-lg navbar-light mynav" style="background-color: #238c91" role="navigation" id="navbar">
      ...
      ...
      ...
    </nav>
        <div class="container">
            {% block content %}

            {% endblock %}
            {% block footer %}
            {% endblock %}
        </div>


    </body>
</html>

Я пытался использовать точно такой же {% block content %}, как в учебнике, но результат не изменился. Любая помощь будет очень признательна.

Второй вопрос: Я совсем новичок в размещении сообщений на stackoverflow и хотел бы узнать, есть ли у кого-нибудь хорошее эмпирическое правило о том, сколько часов нужно потратить на исследования и самостоятельные попытки, прежде чем опубликовать вопрос?

Вы не передаете класс вашей формы в представление, просто передаете поля, что означает, что используемая вами форма - это просто автоматически сгенерированная ModelForm без вашего пользовательского виджета

class CreateEntry(LoginRequiredMixin, generic.CreateView):
    model = JournalEntry
    form_class = JournalForm

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