Passing html attribute to the Select2 options

[rez0n]

Hi, sometimes I need pass additional html (data) attribute to the Select2 field options, for example to disable some options from selecting or do other restrictions on the page based on the selected option.

It is big problem.
What solutions I "invented" over the last year or two.

Solution 1
Creating custom widget on top of the s2forms.Select2Widget
This is most flexible and stable solution, but it works only with choices, which is means it will work super slow with queryset which contains 10K options (which I have and need to use).

Here is example, where I annotated value is_disabled by some conditions and passed it to the Select2 option attrs to disable this such option in list.

class ExampleSelectWidget(s2forms.Select2Widget, ChoiceWidget):

    @staticmethod
    def _choice_has_empty_value(choice):
        """Return True if the choice's value is empty string or None."""
        value, _, is_disabled = choice
        return value is None or value == ""

    def optgroups(self, name, value, attrs=None):
        """Return a list of optgroups for this widget."""
        groups = []
        has_selected = False

        for index, (option_value, option_label, is_disabled) in enumerate(self.choices):
            if not attrs:
                attrs = {}
            attrs['is_disabled'] = is_disabled
            if option_value is None:
                option_value = ""

            subgroup = []
            if isinstance(option_label, (list, tuple)):
                group_name = option_value
                subindex = 0
                choices = option_label
            else:
                group_name = None
                subindex = None
                choices = [(option_value, option_label)]
            groups.append((group_name, subgroup, index))

            for subvalue, sublabel in choices:
                selected = (not has_selected or self.allow_multiple_selected) and str(
                    subvalue
                ) in value
                has_selected |= selected
                subgroup.append(
                    self.create_option(
                        name,
                        subvalue,
                        sublabel,
                        selected,
                        index,
                        subindex=subindex,
                        attrs=attrs,
                    )
                )
                if subindex is not None:
                    subindex += 1
        return groups

    def create_option(self, name, value, label, selected, index, subindex=None, attrs=None):
        index = str(index) if subindex is None else "%s_%s" % (index, subindex)
        option_attrs = (
            self.build_attrs(self.attrs, attrs) if self.option_inherits_attrs else {}
        )
        if selected:
            option_attrs.update(self.checked_attribute)
        if "id" in option_attrs:
            option_attrs["id"] = self.id_for_label(option_attrs["id"], index)
        if attrs['is_disabled'] == 'true':
            option_attrs['disabled'] = ''

        return {
            "name": name,
            "value": value,
            "label": label,
            "selected": selected,
            "index": index,
            "attrs": option_attrs,
            "type": self.input_type,
            "template_name": self.option_template_name,
            "wrap_label": True,
        }


class ExampleForm(Form):
    field_name = forms.ChoiceField(
        widget=ExampleSelectWidget(attrs={
            'class': 'form-control',
        })
    )

    def __init__(self, *args, **kwargs):
        self.queryset = kwargs.pop('queryset', None)
        super().__init__(*args, **kwargs)

        field_name_qs = self.queryset.annotate(is_disabled=Case(
            When(id=2, then=Value('true')),
            default=Value('false')
        ))
        field_name_choices = []
        for option_obj in field_name_qs:
            field_name_choices.append((option_obj.pk, option_obj, option_obj.is_disabled))
        # field_name_choices.insert(0, (None, 'Please select ...', 0))
        self.fields['field_name'].choices = field_name_choices

Solution 2
This solution is for cases when I can't build choices list because queryset contains thousands options.
But it have very serious consequence, it works only in case when you doing search in the Select2 field, after saving and reloading page - selected option will lost appended attribute.

(I tried to modify ModelSelect2Widget to append attribures to the options, lost a few days without result, seems it require to re-implement model choices generator, but it became super slow on any modification)

class ExampleSelect2View(LoginRequiredMixin, AutoResponseView):

    widget = None
    term = ''
    object_list = []

    def get(self, request, *args, **kwargs):
        self.widget = self.get_widget_or_404()
        self.term = kwargs.get("term", request.GET.get("term", ""))
        self.object_list = self.get_queryset()
        context = self.get_context_data()
        return JsonResponse(
            {
                "results": [
                    {"text": self.widget.label_from_instance(obj),
                     "id": obj.pk,
                     "is_lat_lon_available": obj.is_lat_lon_available,
                     }
                    for obj in context["object_list"]
                ],
                "more": context["page_obj"].has_next(),
            }
        )


class ExampleLocationPickWidget(s2forms.ModelSelect2Widget):
    search_fields = [
        "name__icontains",
    ]

    def __init__(self, *args, **kwargs):
        kwargs['data_view'] = 'url_name'
        super().__init__(*args, **kwargs)

    def label_from_instance(self, obj):
        return str(f'{obj.name}')
    

I will very thankfully if someone have any ideas and suggestion how to append additional attrs to the options without pain and also do this for ModelSelect2Widget.

[codingjoe]

Hi @rez0n,

How are you? Excellent ticket as always, but I am not 100% sure, I am getting the use case right. Let me try to paraphrase: You are trying to disable single options in your results. Or pass other options and render the options differently.
Did I get it right thus far?

At my previous company, we used that to select articles (n=10^8). We would render the options with images and manufacturer name, EAN and other information.

I believe my preferred way is to use a custom view and a custom template. You will need to:

1. Provide your JSON view including all data additional points you might need.
2. A custom templateResult callback function, to render a single option. See also: https://select2.org/dropdown#templating
3. Write your own JS file adding the options the callback option:

   $(function () {
     $('.my-custom-select2').djangoSelect2({
        templateResult: (option) { // option is the object returned by your view
          return option.text // this is the default
        }
     })
   })

4. You will need to create your custom widget, including the link to your view, a custom class and an append the form media link to your new script.

That's it. It sounds like much in the beginning, but once you have figured it out, it's truly powerful.

Please reach out to me if you need anything.

Cheers!
Joe

[rez0n]

Hi @codingjoe
I'm fine, thanks, hope you are fine too!

You are trying to disable single options in your results. Or pass other options and render the options differently.

Purpose vary from case to case. Usually I not need to custom rendering, but just additional html attribute for options (like data-something="value").
For example, in the list of locations to select I need to pass attribute which signalise is this such location have it's own timezone set in the database, in case if yes I need to unlock another field on the page allowing to set booking time using local timezone.

Suggested by you it is actually what I described in "Solution 2", but this approach have problem, after saving and page reloading all additional attrs excluding option.text being lost until you re-select option again. (This is problem, because sometimes other fields managed by custom JS code based on additional attrs of the selected option in select2 field).
This is happens because already-selected option renders differently, like regular Django's Select widget, without requesting option and it's details from the select2 json view.
Seems I need to create demo for this, but now I have no enough time for this (will do shortly, today or tomorrow).

[rez0n]

Hi @codingjoe
I'm implemented ready-to-use demo app, you need just to create virtual env (pip or poetry, requirements synced) and launch app (quick start in repository readme)

https://github.com/rez0n/django-select2-custom-attrs-demo

It serve single page with selection of the object (prepared sqlite db also provided)
AutoResponseView supply additional attribute is_tz_available to the each option, which is parsed and echoed on the page.

After submitting you'll see issue, selected (and saved) option no more fetch data from the modified AutoResponseView