Python django自动完成指示灯简单外键完成显示不可编辑下拉小部件
我有一个国家的模式:Python django自动完成指示灯简单外键完成显示不可编辑下拉小部件,python,django,django-autocomplete-light,Python,Django,Django Autocomplete 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
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
使用URL.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 %}
当我将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>
致:
自动完成按要求工作
<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' %}" />