Select

Enriquece el <select> nativo con búsqueda, etiquetas y búsqueda en el servidor. El elemento original sigue en el formulario guardando el valor: name, multiple, required y request.POST.getlist() funcionan como siempre.

Ejemplos

Todo lo de abajo es el mismo <select> con atributos distintos.

Cómo usar

Marca el <select> y se inicializa solo, incluso el que llegue después por HTMX. La primera <option value=""> se convierte en el texto de espera, y no en una opción.

<select name="state" data-tuc-select>
  <option value="">Selecciona...</option>
  <option value="SP">São Paulo</option>
</select>

<select name="tags" data-tuc-select multiple data-placeholder="Añade...">
  <option value="django">Django</option>
</select>

En el formulario de Django

class CustomerForm(forms.ModelForm):
    class Meta:
        model = Customer
        fields = ["state", "tags"]
        widgets = {
            "state": forms.Select(attrs={"data-tuc-select": ""}),
            "tags": forms.SelectMultiple(attrs={"data-tuc-select": "", "data-max-items": "3"}),
        }

En JavaScript

Para opciones que no existen como atributo, o para leer y escribir el valor.

const s = new Tucano.Select('#state', { search: true, maxItems: 3 });
s.getValue();            // 'SP' — un array en el múltiple
s.setValue(['SP', 'PR']);
s.refresh();             // vuelve a leer las <option> después de sustituirlas por HTMX

Búsqueda en el servidor

Para listas demasiado grandes para venir enteras en la página. A cada tecla el componente le pregunta al servidor, en lugar de filtrar lo que ya está cargado.

<select name="customer" data-tuc-select data-url="{% url 'api-customers' %}"></select>

def customers(request):
    q = request.GET.get("q", "")
    qs = Customer.objects.filter(name__icontains=q)[:20]
    return JsonResponse([{"value": c.pk, "label": c.name} for c in qs], safe=False)

Valor y formulario

Quien guarda el valor es el <select> nativo, oculto al lado del control. Django recibe exactamente lo que recibiría sin el componente.

POST  state = SP
POST  tags  = django    # request.POST.getlist("tags")
POST  tags  = htmx

Cada elección dispara tucano:change en el propio <select>, y también el change nativo — así el hx-trigger="change" de HTMX funciona sin ajustes.

document.querySelector('#state').addEventListener('tucano:change', (e) => {
  e.detail.value;      // 'SP', o un array en el múltiple
  e.detail.instance;   // el Select
});

Teclado y accesibilidad

El control es un combobox con listbox, y anuncia abierto, cerrado y la opción activa. Llegar con Tab no abre el panel — es la regla del <select> nativo.

API

Generada a partir del código en cada build — si algo no está aquí, no existe.

Opciones

Las notas de esta tabla salen de los comentarios del código fuente, que están escritos en portugués.