Django 自动完成灯:字段未填充
Django autocomplete light: field not populated
我已经安装了 "Django autocomplete light",现在正在学习本教程:https://django-autocomplete-light.readthedocs.org/en/master/tutorial.html
到目前为止,这是我的代码:
setting.py
INSTALLED_APPS = (
'dal',
'dal_select2',
'garages',
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
)
models.py
class Country(models.Model):
name = models.CharField(max_length=200)
def __str__(self):
return self.name
class Person(models.Model):
birth_country = models.ForeignKey(Country)
def __str__(self):
return self.birth_country
views.py
class CountryAutocomplete(autocomplete.Select2QuerySetView):
def get_queryset(self):
# Don't forget to filter out results depending on the visitor !
if not self.request.user.is_authenticated():
return Country.objects.none()
qs = Country.objects.all()
if self.q:
qs = qs.filter(name__istartswith=self.q)
return qs
def create_person(request):
person_form = PersonForm()
c = {
'person_form': person_form,
}
c.update(csrf(request))
return render_to_response('garages/person_form.html', c,
context_instance=RequestContext(request))
forms.py
class PersonForm(forms.ModelForm):
class Meta:
model = Person
fields = '__all__'
widgets = {
'birth_country': autocomplete.ModelSelect2(url='garages:country-autocomplete')
}
urls.py
url(r'^country-autocomplete/$', CountryAutocomplete.as_view(), name='country-autocomplete'),
url(r'^new_person/$', views.create_person, name='create_person'),
person_form.html
{% extends 'base.html' %}
{% block content %}
<div>
<form action="" method="post">
{% csrf_token %}
{{ person_form.as_p }}
<input type="submit" />
</form>
</div>
{% endblock %}
{% block footer %}
<script type="text/javascript" src="http://dal-yourlabs.rhcloud.com/static/collected/admin/js/vendor/jquery/jquery.js"></script>
{{ form.media }}
{% endblock %}
结果
问题:'Birth country' 字段未填充,我也无法输入。
这是什么原因?
有没有可能是base.html上加载的.js产生的原因?
在base.html加载
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
解决方案很简单:添加一些插件 javascript 和 css
<link href="/static/collected/autocomplete_light/vendor/select2/dist/css/select2.css" type="text/css" media="all" rel="stylesheet" />
<link href="/static/collected/autocomplete_light/select2.css" type="text/css" media="all" rel="stylesheet" />
<script type="text/javascript" src="/static/collected/autocomplete_light/autocomplete.init.js"></script>
<script type="text/javascript" src="/static/collected/autocomplete_light/select2.js"></script>
确保在模板中包含 {{form.media}}。
我已经安装了 "Django autocomplete light",现在正在学习本教程:https://django-autocomplete-light.readthedocs.org/en/master/tutorial.html
到目前为止,这是我的代码:
setting.py
INSTALLED_APPS = (
'dal',
'dal_select2',
'garages',
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
)
models.py
class Country(models.Model):
name = models.CharField(max_length=200)
def __str__(self):
return self.name
class Person(models.Model):
birth_country = models.ForeignKey(Country)
def __str__(self):
return self.birth_country
views.py
class CountryAutocomplete(autocomplete.Select2QuerySetView):
def get_queryset(self):
# Don't forget to filter out results depending on the visitor !
if not self.request.user.is_authenticated():
return Country.objects.none()
qs = Country.objects.all()
if self.q:
qs = qs.filter(name__istartswith=self.q)
return qs
def create_person(request):
person_form = PersonForm()
c = {
'person_form': person_form,
}
c.update(csrf(request))
return render_to_response('garages/person_form.html', c,
context_instance=RequestContext(request))
forms.py
class PersonForm(forms.ModelForm):
class Meta:
model = Person
fields = '__all__'
widgets = {
'birth_country': autocomplete.ModelSelect2(url='garages:country-autocomplete')
}
urls.py
url(r'^country-autocomplete/$', CountryAutocomplete.as_view(), name='country-autocomplete'),
url(r'^new_person/$', views.create_person, name='create_person'),
person_form.html
{% extends 'base.html' %}
{% block content %}
<div>
<form action="" method="post">
{% csrf_token %}
{{ person_form.as_p }}
<input type="submit" />
</form>
</div>
{% endblock %}
{% block footer %}
<script type="text/javascript" src="http://dal-yourlabs.rhcloud.com/static/collected/admin/js/vendor/jquery/jquery.js"></script>
{{ form.media }}
{% endblock %}
结果
问题:'Birth country' 字段未填充,我也无法输入。
这是什么原因? 有没有可能是base.html上加载的.js产生的原因?
在base.html加载
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
解决方案很简单:添加一些插件 javascript 和 css
<link href="/static/collected/autocomplete_light/vendor/select2/dist/css/select2.css" type="text/css" media="all" rel="stylesheet" />
<link href="/static/collected/autocomplete_light/select2.css" type="text/css" media="all" rel="stylesheet" />
<script type="text/javascript" src="/static/collected/autocomplete_light/autocomplete.init.js"></script>
<script type="text/javascript" src="/static/collected/autocomplete_light/select2.js"></script>
确保在模板中包含 {{form.media}}。