Django-filters - Как добавить функцию автозаполнения

Я сделал фильтры с помощью django-filters. В результате я получил выпадающее меню. Возможно ли добавить поле автозаполнения/поиска в это выпадающее меню?

Я уже пытался добавить виджет Select2Widget, как указано в другом сообщении, но единственное, что меняется, это то, что он добавляет пустое поле перед пунктирной линией. Но оно не позволяет мне ничего написать. Может быть, в шаблоне чего-то не хватает????? Stackoverflow пока не позволяет мне добавлять изображения, поэтому я делюсь тем кодом, который у меня есть.

filters.py

import django_filters
from django_select2.forms import Select2Widget
from .models import Consumo, Cliente

AÑO_CHOICES = (('2021', '2021'), ('2022', '2022'),)

class ConsumoFilter(django_filters.FilterSet):
año = django_filters.ChoiceFilter(choices=AÑO_CHOICES, label='Año', widget=Select2Widget(attrs={'style':'width: 20ch', 'class':'form-select form-select-sm'}))
name = django_filters.ModelChoiceFilter(queryset=Cliente.objects.all(), label='Clientes', widget=Select2Widget(attrs={'style':'width: 85ch','class': 'form-select form-select-sm'}))
     
class Meta:
    model = Consumo
    fields = ['name', 'año']

шаблон

{% extends 'clientes/base.html' %}
{% load static %}

{% block title %}Title{% endblock %}

{% block head %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js" integrity="sha512-2ImtlRlf2VVmiGZsjm9bEyhjGW4dU7B6TNwh/hx/iSByxNENtj3WVE6o/9Lj4TJeVXPi4bnOIMXFIJJAeufa0A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" integrity="sha512-nMNlpuaDPrqlEls3IX/Q56H36qvBASwb3ipuo3MxeWbsQB1881ox0cRv7UPTgBlriqoynt35KjEwgGUeUXIPnw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

{% endblock %}

{% block content %}

<div class="card" style="margin-top: 20px; margin-bottom: 20px;">
   <div class="card-body">
     <h4 class="card-title">Consumos</h4>
     <h6 class="card-subtitle mb-2 text-muted">Consumos por cliente</h6>
     <hr>
    
       <div class="container">
           <div class="row">
               <div class="col-lg-12">
                   <form method="get">
                       {{ consumo_filter.form }}
                    
                       <br>
                       <button type="submit" class="btn btn-sm btn-primary">Buscar</button>
                   </form>
                   <hr>

            </div>

        </div>
    </div>

  </div>
</div>

{% endblock %}

{% block javascript %}
{% endblock %}

{% block javascript %}

<script>
    $(document).ready(function() {
    $('#name').select2();
});
</script>

{% endblock %}