Django - Автозаполнение выпадающего поля среди других полей в форме

Я пытаюсь сделать 1 поле в форме автозаполняемым выпадающим окном, которое перечисляет значения из другой модели, но безуспешно. Это форма 'Create' для ввода данных о сотрудниках. Я новичок в разработке приложений. Поэтому мне трудно понять концепции для реализации. Пожалуйста, помогите.

вот моя модель.

class State(models.Model):
    StateCode = models.CharField(max_length=2)
    StateTIN = models.IntegerField()
    StateName = models.CharField(max_length=100)
    
    def __str__(self):
        return self.StateName

class EmployeeM(models.Model):
    id = models.UUIDField(default=uuid.uuid4, unique=True, primary_key=True, editable=False)
    Name = models.CharField(max_length=200)
    Email = models.EmailField()
    Contact = models.CharField(max_length=20)
    State = models.ForeignKey(State,on_delete=models.SET_NULL,null=True) 
 
     
    def __str__(self):
        return self.Name

Вот мои взгляды,

    #Create1 html view
    def create(request):
        form = EmployeeMForm()
    
        if request.method == 'POST':
            form = EmployeeMForm(request.POST)
            if form.is_valid():
                form.save()
                return redirect('employeem-list')
    
        context = {
            'form': form,
        }
        return render(request,'EmployeeM/create.html', context)



#List States
def state_list(request):
    states = State.objects.all()
    context = {
        'states': states
        }
    return render(request, 'State/statelist.html', context)

Вот моя часть HTML кодов, где я пытаюсь сделать поле 'State' как выпадающее поле, а также с возможностью поиска.

{{ form.non_field_errors }}
{{ form.source }}

<table border="1" cellpadding="10px">

    <tr>
        <th>{{ form.Name.label_tag }}</th>
        <td> 
            {{ form.Name.errors }}
            {{ form.Name }}
        </td>
    </tr>
    <tr>
        <th>{{ form.Email.label_tag }}</th>
        <td>
            {{ form.Email.errors }}
            {{ form.Email }}
        </td>
    </tr>
    <tr>
        <th>{{ form.Contact.label_tag }}</th>
        <td>
            {{ form.Contact.errors }}
            {{ form.Contact }}
        </td>
    </tr>
    <tr>
        <th>{{ form.State.label_tag }}</th>
        <td>
            {{ form.State.errors }} 
            <input autoComplete="on"  type="text" list="states" placeholder="State" class="form-control" />
            <datalist id="states">
                {% for s in states %}
                <option value="{{ s.State }}"></option>
                {% endfor %}
            </datalist>
        </td>
    </tr>

Вот мой forms.py

class EmployeeMForm(forms.ModelForm):
    class Meta:
        model = EmployeeM

        fields = ('Name', 'Email', 'Contact', 'State')

        widgets = {
            'Name': forms.TextInput(attrs={'class': 'form-control', 'placeholder': 'Name', 'style': 'width: 400px'}),
            'Email': forms.TextInput(attrs={'class': 'form-control', 'placeholder': 'Email', 'style': 'width: 400px'}),
            'Contact': forms.TextInput(attrs={'class': 'form-control', 'placeholder': 'Contact No.', 'style': 'width: 400px'}),
            'State': forms.Select(attrs={'class': 'form-control', 'placeholder': 'State', 'style': 'width: 400px'}),
        }

Но выпадающий список так и не появляется. Он просто отображает поле ввода. Пожалуйста, помогите мне добиться выпадающего поля с возможностью поиска.

Заранее спасибо!

def create(request):
        form = EmployeeMForm()
        states = State.objects.all()
        if request.method == 'POST':
            form = EmployeeMForm(request.POST)
            if form.is_valid():
                form.save()
                return redirect('employeem-list')
    
        context = {
            'form': form,
            'states': states
        }
        return render(request,'EmployeeM/create.html', context)

...
<td>
            {{ form.State.errors }} 
            <input autoComplete="on"  type="text" list="states" placeholder="State" class="form-control" />
            <datalist id="states">
                {% for s in states %}
                <option value="{{ s.StateName }}">
                {% endfor %}
            </datalist>
        </td>
...