如何在绑定到Django中的模型字段的模板中呈现输入字段

Question

这个问题似乎可以解决，但我却无法解决。希望我能解释我的困境。

我正在尝试在表单中包含 jQuery 自动填充功能。自动完成功能本身运行良好。我现在正尝试将其链接到类似这样的模型：

models.py

class SupplierCatchment(models.Model):
    supp = models.ForeignKey(Supplier.....)
    supp_area = models.ForeignKey(Country, ...)
    supp_remarks = models.CharField(max_length=150,...)

为了呈现表单，我使用的是模型表单。

案例1：

在我的模板中，我正在手动渲染这些字段。对于自动完成字段，但是我使用的是这样的html输入：

模板

.....
{% if field.name == "supp_area" %}
    <input type="text" id="supp_area" name="supp_area" placeholder="..."> <!-- My area of concern -->
{% else %}
    {{ field }}

....

在处理过程中，自动完成字段id="supp_area"从Country模型中正确提取值。

但是，保存时，我只能保存在字段supp_remarks中输入的数据，并且字段 supp_area保持空白（这不是必填字段）。

案例2：

我试图以{strong>模型形式使用id强制字段attrs，如下所示（改编自here）：

class CreateSuppAreaForm(forms.ModelForm):
    ....
    class Meta:
        model = SupplierCatchment
        fields = ('supp_area', 'supp_remarks')
        widgets = {
            'supp_area': forms.TextInput(attrs={'id': 'country_search', 'placeholder': 'type...'}),   # 'id' being used in template autocomplete script
    ...
    ...

但是，在这种情况下，我遇到以下错误：

选择一个有效的选择。该选择不是可用的选择之一 选择。

我发现它有点奇怪，因为模型字段supp_area和jQuery自动完成 view 都指的是相同的FK模型Country

需要完成的操作，以便保存输入字段 id="supp_area"的值。我个人想使用案例1 。

编辑：

jQuery代码

<script>
    $( "#supp_area" ).autocomplete({
        source: "{% url 'country_search' %}",
        minLength: 2,
//      delay: 20,
    });
</script>

URL

path('country_search/', CountrySearch, name='country_search'),