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

这个问题似乎很容易解决，但我却没有解决。希望我能解释我的困境

我试图在表单中包含一个jQuery自动完成。自动完成本身工作正常。我现在尝试将其链接到一个类似以下内容的模型：

型号.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 }}

....

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

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

考虑到model字段

supp_area

和jQuery autocomplete视图都指向同一个FK模型

国家，我觉得这有点奇怪

需要执行的操作以便保存输入字段
id=“supp\u area”
值。我个人想使用案例1

编辑：
jQuery代码
您能提供jQuery代码吗？对我来说，这看起来像是一场灾难。与试图修改Django的表单以使用jQuery相比，修改jQuery以使用表单将更容易。您可以提供jQuery代码吗？对我来说，这看起来像是一场灾难。与试图修改Django的表单以使用jQuery相比，修改jQuery以使用提供的表单要容易得多。
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
    ...
    ...

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

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