django-autocompletion-light простое завершение внешнего ключа показывает не редактируемый раскрывающийся виджет

У меня есть модель для стран:

    class Country(models.Model):
        name = models.CharField(max_length=200)

    def __str__(self):
        return self.name

На это ссылается внешний ключ в модели UserDetails:

    class UserDetails(models.Model):

        ...
        country = models.ForeignKey(Country,verbose_name='Country',null=True, blank=True, default = None)

Используя django-autocomplete-light, я бы указал, что при вставке страны у меня есть текстовый виджет, который завершается при написании первых букв.

Итак, я подготовил:

    class CountryAutocomplete(autocomplete.Select2QuerySetView):
        def get_queryset(self):

            qs = Country.objects.all()

        if self.q:
            qs = qs.filter(name__istartswith=self.q)

        return qs

С urls.py:

    app_name='shared'
    urlpatterns = [
        url(
            r'^country-autocomplete/$',
            CountryAutocomplete.as_view(),
            name='country-autocomplete',
        ),
    ]

И для формы UserDetails:

    class UserDetailsForm(forms.ModelForm):

        country = forms.ModelChoiceField(
            queryset=Country.objects.all(),
            widget=autocomplete.ModelSelect2(url='shared:country-autocomplete')
            )

        class Meta:
            model = UserDetails
            fields = [...,"country"]

В качестве шаблона я использовал:

{% load static %}


{% block content %}
<form method="post" action=".">
    {% csrf_token %}
    {{ user_form.as_p }}
    {{ user_details_form.as_p }}
    <input type="submit" value="Submit" />
</form>
{% endblock %}

{% block footer %}
    <script type="text/javascript" src="{% static 'admin/js/vendor/jquery/jquery.js' %}"></script>
    <link rel="stylesheet" type="text/css" href="{% static 'autocomplete_light/select2.css' %}" />
    <script type="text/javascript" src="{% static 'autocomplete_light/jquery.init.js' %}"></script>
    <script type="text/javascript" src="{% static 'autocomplete_light/autocomplete.init.js' %}"></script>
    <script type="text/javascript" src="{% static 'autocomplete_light/select2.js' %}"></script>
    <script type="text/javascript" src="{% static 'autocomplete_light/vendor/select2/dist/css/select2.css' %}"></script>
    <script type="text/javascript" src="{% static 'autocomplete_light/vendor/select2/dist/js/select2.full.js' %}"></script>
    <script type="text/javascript" src="{% static 'autocomplete_light/forward.js' %}"></script>
    <script type="text/javascript" src="{% static 'admin/js/vendor/jquery/jquery.js' %}"></script>
    {{ form.media }}
{% endblock %}

Я скопировал все статические файлы в папку с именем «static» в корне проекта и установил STATIC_URL='/static/' в настройках сайта. При выполнении вызова get ведение журнала сервера выполнения дает статические файлы:

[23/Oct/2016 17:44:59] "GET /accounts/register/ HTTP/1.1" 200 2344
[23/Oct/2016 17:44:59] "GET /static/admin/js/vendor/jquery/jquery.js HTTP/1.1" 304 0
[23/Oct/2016 17:44:59] "GET /static/autocomplete_light/autocomplete.init.js HTTP/1.1" 304 0
[23/Oct/2016 17:44:59] "GET /static/autocomplete_light/select2.js HTTP/1.1" 304 0
[23/Oct/2016 17:44:59] "GET /static/autocomplete_light/select2.css HTTP/1.1" 304 0
[23/Oct/2016 17:44:59] "GET /static/autocomplete_light/jquery.init.js HTTP/1.1" 304 0
[23/Oct/2016 17:44:59] "GET /static/autocomplete_light/vendor/select2/dist/css/select2.css HTTP/1.1" 304 0
[23/Oct/2016 17:44:59] "GET /static/autocomplete_light/vendor/select2/dist/js/select2.full.js HTTP/1.1" 304 0
[23/Oct/2016 17:44:59] "GET /static/autocomplete_light/forward.js HTTP/1.1" 304 0
[23/Oct/2016 17:44:59] "GET /static/admin/js/vendor/jquery/jquery.js HTTP/1.1" 304 0

Когда я отправляю get непосредственно в представление автозаполнения, я получаю в результате то, что ожидаю:

http://127.0.0.1:8000/shared/country-autocomplete/?q=u

{"pagination": {"more": false}, "results": [{"text": "USA", "id": 3}]}

Однако, если я захожу на форму регистрации, для поля страны я получаю такой виджет:

страна_виджет

Это пусто и не может быть отредактировано. Как я могу иметь текстовый виджет, который предлагает названия стран при наборе букв?


person alessandro.ferrari    schedule 23.10.2016    source источник


Ответы (1)


Проблема заключалась в том, что я импортировал css как файл javascript, изменив

<script type="text/javascript" src="{% static 'autocomplete_light/vendor/select2/dist/css/select2.css' %}"></script>

to:

<link rel="stylesheet" type="text/css" href="{% static 'autocomplete_light/vendor/select2/dist/css/select2.css' %}" />

автодополнение работало как хотел.

person alessandro.ferrari    schedule 23.10.2016