Question

我正在尝试集成Jquery UI的自动完成功能，但我没有运气。我已经成功实现了datepicker，所以我决定采用相同的方法。

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 %}

目标是让它使用默认值，然后我将它们更改为模型中的数据。知道为什么它不起作用吗？

Answer 1

我通过查看模板生成的源代码来解决这个问题。

我不得不改变：

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

到

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

这是由于{{form.as_p}}追加＆＃34; id _＆＃34;到form.py中的变量名。

Django forms.Form小部件和Jquery UI自动完成

1 个答案: