[英]django-autocompletion-light simple foreign key completion shows not editable drop-down widget
我有一個國家模型:
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}]}
但是,如果我轉到注冊表單,對於國家/地區字段,我會得到這樣一個小部件:
這是空的,無法編輯。 如何在鍵入字母時顯示一個建議國家/地區名稱的文本小部件?
問題是我導入了一個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' %}" />
自動完成按預期工作。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.