Как отобразить поле ввода в шаблоне, привязанном к полю модели в 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:

Я пытался принудительно задать поле id, используя attrs в моей форме модели вот так (адаптировано с здесь ):

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 автозаполнение представление относятся к той же модели 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'),