How to make an input field with prompts that will appear in the process of entering data-CodePudding

I am making a site on Django. And I faced a problem. I would like to create an input field in the form so that it is initially empty, but so that in the process of how the user enters data into it, a frame will appear next to it, with possible selection options based on data already entered by the user.

In short, I want to make something like this field

Help me please

CodePudding user response：

The Select2 library is one that does a lot of magic for you.

An example from their own docs:

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 }}