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

【问题标题】：Django forms.Form widgets and Jquery UI autocompleteDjango forms.Form 小部件和 Jquery UI 自动完成
【发布时间】：2017-07-08 02:18:37
【问题描述】：

我正在尝试集成 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'}))

提交.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 %}

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

【问题讨论】：

标签： django forms jquery-ui autocomplete

【解决方案1】：

我是通过查看模板生成的源代码弄明白的。

我不得不改变：

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

到

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

这是由于{{form.as_p}} 将“id_”附加到form.py 中的变量名。

【讨论】：