#python #django #django-autocomplete-light
#python #django #django-автозаполнение-легкое
Вопрос:
У меня есть модель для стран:
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 в журнале runserver отображаются статические файлы:
[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}]}
Однако, если я перейду в регистрационную форму для поля страны, я получу такой виджет:
Он пуст и не может быть отредактирован. Как я могу создать текстовый виджет, который предлагает названия стран при вводе букв?
Ответ №1:
Проблема заключалась в том, что я импортировал css в виде файла javascript, изменив
<script type="text/javascript" src="{% static 'autocomplete_light/vendor/select2/dist/css/select2.css' %}"></script>
Для:
<link rel="stylesheet" type="text/css" href="{% static 'autocomplete_light/vendor/select2/dist/css/select2.css' %}" />
автозаполнение сработало так, как хотелось.