Frontend Comparison: alight vs select2 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Both frontends share the same Django-side base classes (``BaseQuerySetView``, ``ViewMixin``, ``forward.py``). They differ in what the view returns and which JS component renders it. Core difference =============== .. list-table:: :header-rows: 1 :widths: 20 40 40 * - Aspect - ``dal_alight`` - ``dal_select2`` * - Response format - HTML fragments ``
Label
`` - JSON ``{results:[{id, text, selected_text}], pagination:{more}}`` * - JS payload - ``autocomplete-light`` web component (15 KB) + 11 KB DAL adapter. **No jQuery.** - Select2 4.x (~170 KB) + jQuery (via Django admin) + 5 KB DAL glue * - Browser API - Native Custom Elements v1, no framework - jQuery plugin, ``data-*`` attribute wiring Feature matrix ============== .. list-table:: :header-rows: 1 :widths: 30 12 12 46 * - Feature - alight - select2 - Notes * - Single FK - yes - yes - ``ModelAlight`` / ``ModelSelect2`` * - Multiple M2M - yes - yes - ``ModelAlightMultiple`` / ``ModelSelect2Multiple`` * - Free list - yes - yes - ``ListAlight`` + corresponding views / ``ListSelect2`` * - Tags / comma-separated - yes - yes - ``TagAlight`` / ``TagSelect2`` * - django-taggit integration - yes - yes - ``TaggitAlight`` / ``TaggitSelect2`` * - Grouped results - yes - yes - ``AlightGroupQuerySetView`` / ``Select2GroupQuerySetView`` * - Grouped free list - yes - yes - ``AlightGroupListView`` / ``Select2GroupListView`` * - Generic FK via queryset-sequence - yes - yes - ``dal_alight_queryset_sequence`` / ``dal_select2_queryset_sequence`` * - Create on the fly - yes - yes - alight: ``
`` sentinel; select2: JSON flag ``create_id:true`` * - Infinite scroll / pagination - yes - yes - alight: ``
`` sentinel; select2: ``pagination.more`` * - Field forwarding - yes - yes - Both use the same ``forward.py``; alight adapter is vanilla JS * - Django admin popup sync - yes - yes - alight patches ``dismissAddRelatedObjectPopup`` in ``dal-django.js`` * - Minimum input length - yes - yes - alight: ``minimum-characters`` attribute; select2: ``data-minimum-input-length`` * - Clear / remove selection - yes - yes - alight uses × buttons in the deck * - Client-side local filtering - yes - **no** - alight: ``Alight`` / ``AlightMultiple`` without a ``url`` filter ``