2017-02-18 34 views
0

我想集成jquery UI的Autocomplete,但我沒有任何運氣。我已經成功實現了datepicker,所以我決定使用相同的方法。Django forms.Form小部件和jquery UI自動完成

form.py

from django import forms 
from asset_db.models import Profiles 


class SubmitJob(forms.Form): 

    material_id = forms.CharField(max_length=8, widget=forms.TextInput(attrs={'class': 'autocomplete'})) 
    workflow = forms.ModelChoiceField(queryset=Profiles.objects.distinct('name'), to_field_name='name') 
    start_datepicker = forms.CharField(max_length=12, widget=forms.DateInput(attrs={'class': 'datepicker'})) 
    end_datepicker = forms.CharField(max_length=12, widget=forms.DateInput(attrs={'class': 'datepicker'})) 

submit.html

{% extends 'website/header.html' %} 
{% block content %} 
    <p><b>Submit Job</b></p> 
    <form action="{% url 'job' %}" method="post">{% csrf_token %} 
     <script> 
      $(document).ready(function() { 
       $('.datepicker').datepicker(); 
      }); 
     </script> 
     <script> 
      $(function() { 
      var availableTags = [ 
       "ActionScript", 
       "AppleScript", 
       "Asp", 
       "BASIC", 
       "C", 
       "C++", 
       "Clojure", 
       "COBOL", 
       "ColdFusion", 
      ]; 
      $("#material_id").autocomplete({ 
       source: availableTags 
      }); 
      }); 
     </script> 
     <p>{{ message }}</p> 
     <b>Select Asset to transcode</b> 
     {{form.as_p}} 
     <p> 
      <input type="submit" name="submit" /> 
     </p> 
    </form> 
{% endblock %} 

的目標是把它以默認值工作,那麼我將其更改爲數據模型中。任何想法爲什麼它不工作?

回答

0

我通過查看模板生成的源代碼來了解它。

我不得不改變:

$("#material_id").autocomplete({ 
    source: availableTags 
}); 

$("#id_material_id").autocomplete({ 
    source: availableTags 
}); 

這是由於{{form.as_p}}form.py追加 「ID_」 的變量名。