Djangoのテキスト入力先行入力の自動補完

Question

私は、単純なモデル

class Thing(models.Model): 

    name = models.CharField(max_length=40) 
    language = models.CharField(max_length=2, default='de') 
    date_from = models.DateField(default=timezone.now) 

既存の行から既存の名前を入力中nameフィールドは、フォームで事前に設定する必要がありますがあります。私はdjango-select2またはdjango-autocomplete-lightを見ました。しかし、両方のパッケージはForeignKeysのためにほとんど使用されています。実際私は自分のプロジェクトでもそうしています。

JavaScriptで多くのことをハックすることなくこのタスクを解決する方法を誰かが知っていますか？

Answer 1

JavaScriptルートを使用せずに、データリストを使用します。

<label for="name-id">Name: </label> 
 
    
 
<input list="names" name="name" id="name-id" /> 
 
    
 
<datalist id="names"> 
 
    <option value="Vione"> 
 
    <option value="Veya"> 
 
    <option value="Argo"> 
 
    <option value="Paro"> 
 
    <option value="Esena"> 
 
    <option value="Sanar"> 
 
</datalist>

次のようにこれはジャンゴで実施することができる：

# Your view 

class ThingCreateView(CreateView): 
    model = Thing 
    success_url = reverse('thing-list') 

    def get_form(self, form_class=None): 
     form = super().get_form(form_class) 

     # make the 'name' field use a datalist to autocomplete 
     form.fields['name'].widget.attrs.update({'list': 'names'}) 

     return form 

    def get_context_data(self, **kwargs): 
     context = super().get_context_data(**kwargs) 

     # add `names` to the context to populate the datalist 
     context['names'] = Thing.objects.values_list('name', flat=True) 

     return context 

 

# Your form 
<form method="post"> 
    {% csrf_token %} 

    {{ form.as_p }} 

    <datalist id="names"> 
     {% for name in names %} 
     <option value="{{ name }}"> 
     {% endfor %} 
    </datalist> 

    <input type="submit" value="Save" /> 
</form> 

Answer 2

私は今https://github.com/running-coder/jquery-typeaheadからの偉大なjqueryの先行入力プラグインを使用しています。事のモデルのための私のフォームは、クラスの後の方で....

class ThingShareCreateForm(forms.ModelForm): 

    helper = FormHelper() 
    helper.layout = Layout(
     Div(
      Div('mode', css_class='col-md-2'), 
      Div(Div(Field(Div(PrependedText('name', '<span class="fa fa-search"></span>'), 
          css_class='typeahead__query'), 
         css_class='typeahead__field'), 
        css_class='typeahead__container'), 
       css_class='col-md-5'), 

あるメタは

class Meta: 

    model = ThingShare 
    fields = ['mode', 'name', 'source', 'source_text', 'date_from', 'date_to'] 

    widgets = { 
     'name': forms.TextInput(attrs={'class': 'js-typeahead-name', 
             'name' : 'q', 
             'type' : 'search', 
             'autocomplete': 'off', 
             }), 

これは、その後のように使用することができます。

typeof $.typeahead === 'function' && $.typeahead({ 
     input: ".js-typeahead-name", 
     minLength: 1, 
     hint: false, 
     source: { 
      country: { 
       data: data.countries 
      }, 
     }, 
     callback: { 
      onClickAfter: function (node, a, item, event) { 
       event.preventDefault(); 

として偉大なドキュメンテーションと例に記載されています。このライブラリは詳しく見てみましょう。私はまだ私のモデル "Thing"で基本的に選択されたAJAX呼び出しを実装する必要があります。非常にシンプルになりました

よろしく

マイケル