Django-filters - How to add autocomplete feature

Question

I have made filters using django-filters. As a result I get a dropdown menu. Is it possible to add an autocomplete/search field to this dropdown?

I have already tried to add the Select2Widget widget as indicated in another post, but the only thing that changes is that it adds an empty field before the dotted line. But it won't let me write anything. Maybe something is missing in the template??? Stackoverflow don't let me add images yet so I share the code I have.

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']

template

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

Answer 1

Ok, I found out. You need to add a id="" attribute to attrs=

name = django_filters.ModelChoiceFilter(queryset=Cliente.objects.all(), label='Clientes', widget=Select2Widget(attrs={'style':'width: 85ch', 'id':'name', 'class': 'form-select'}))

Then in your template you call it with the Select2 JS code:

{% block javascript %}

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

{% endblock %}