ジャンゴ - 自動補完 - 光の単純な外部キー完了は編集できませんドロップダウンウィジェット

Question

が、私は国のためのモデルを持って示しています

class UserDetails(models.Model): 

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

：UserDetailsモデルの外部キーによって参照される

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

    def __str__(self): 
     return self.name 

django-autocomplete-lightを使用すると、国を挿入するときに、最初の文字を書いている間に完了するテキストウィジェットがあることがわかります。

このように、私が用意してきた：urls.pyで

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

      qs = Country.objects.all() 

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

     return qs 

を：

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_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 

私はオートコンプリートのビューに直接取得し送信すると、私は何を期待結果として得る：

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

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

空とCAです：私は、登録フォームに行く場合は、国フィールドのために、私はそのようなウィジェットを取得します編集することはできません。 文字を入力する際に​​国名を示すテキストウィジェットを使用するにはどうすればよいですか？望んでいたとして自動補完が働い

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

：

Answer 1

の問題は、私が

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

を変更し、JavaScriptのファイルとして をCSSを輸入していることでした。