Как сделать поле ввода с подсказками, которые будут появляться в процессе ввода данных

Я делаю сайт на Django. И столкнулся с проблемой. Я хочу создать поле ввода в форме, чтобы оно было изначально пустым, но чтобы в процессе того, как пользователь вводит в него данные, рядом с ним появлялась рамка с возможными вариантами выбора на основе уже введенных пользователем данных.

Короче говоря, я хочу сделать что-то вроде этого поля

enter image description here

Помогите мне, пожалуйста

Библиотека Select2 - это библиотека, которая делает много волшебства за вас. https://django-select2.readthedocs.io/en/latest/. enter image description here

Пример из их собственной документации:

forms.py

class AuthorWidget(s2forms.ModelSelect2Widget):
    search_fields = [
        "username__icontains",
        "email__icontains",
    ]

class BookForm(forms.ModelForm):
    class Meta:
        model = models.Book
        fields = "__all__"
        widgets = {
            "author": AuthorWidget,
        }

urls.py

urlpatterns = [
    path("select2/", include("django_select2.urls")),
    ....
]

template.html

<h1>Create a new Book</h1>
<form method="POST">
    {% csrf_token %}
    {{ form.as_p }}
    <input type="submit">
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
{{ form.media.js }}

Вернуться на верх