Styling Demos

Example Overview

This example demonstrates the use of django_tomselect with Default, Bootstrap 4, and Bootstrap 5 styling to create responsive, dynamic <select> fields. The example includes various configurations for single and multiple selections, highlighting the integration with a modern CSS framework.

What problem does it solve?

This setup simplifies the creation of user-friendly, visually appealing dropdowns with advanced features like:

• Autocomplete.

• Placeholder text.

• Tabular dropdown headers.

• Options for creating and managing items directly from the dropdown.

Key features highlighted:

• Single and multiple select fields with Bootstrap 4 styling.

• Server-side autocomplete with configurable behavior.

Visual Examples

---

Key Code Segments

Forms

The DefaultStylingForm, Bootstrap4StylingForm, and Bootstrap5StylingForm in forms/basic_demos.py configures fields using TomSelectConfig for the prefered styling.

Default Styling

class Bootstrap4StylingForm(forms.Form):
    tomselect = TomSelectModelChoiceField(
        config=TomSelectConfig(
            url="autocomplete-edition",
            css_framework="bootstrap4",  # <<-- Bootstrap 4 styling
            placeholder="Select a value",
            highlight=True,
            open_on_focus=True,
            plugin_clear_button=PluginClearButton(
                title="Clear Selection", class_name="clear-button"
            ),
        ),
        attrs={"class": "form-control mb-3"},
        label="Single Select",
        help_text="Example of single select with autocomplete and clear button.",
    )
    # Other fields omitted for brevity

• Purpose: This sets up a dropdown with an autocomplete endpoint (url), styling with preferred style, and a clear button plugin.

---

Template

The default.html. bs4.html, and bs5.html templates render the form using the specified styling. They extend the base layout and include the necessary CSS and JavaScript assets.

Template

{% extends 'example/base_with_bootstrap4.html' %}

{% block extra_header %}
    {{ form.media }}
    <style>
        .helptext {
            font-size: 10px;
            color: #757575;
        }

        /* Override the default form label color to white */
        .form-label {
            color: #FFF;
        }
    </style>
{% endblock %}

{% block content %}
    <div class="card">
        <div class="card-header">
            <h2>Bootstrap 4 Styling Demo</h2>
        </div>
        <div class="card-body">
            <div class="pb-5">This page demonstrates four different configurations for the django_tomselect form fields using Bootstrap 4 styling.</div>
            <form>
                {% csrf_token %}
                {{ form.as_div }}
            </form>
        </div>
    </div>
{% endblock %}

---

Autocomplete View

The autocomplete functionality is defined in the autocompletes.py file using AutocompleteModelView.

• Here, we use skip_authorization to bypass the default authorization checks for demonstration purposes.

• Any searches will use the name field of the Edition model.

• The page_size parameter sets the number of results to return per page.

• The value_fields parameter specifies the fields to return in the response.

• The list_url, create_url, update_url, and delete_url parameters are the url names for the respective views, if available.

Autocomplete View

class EditionAutocompleteView(AutocompleteModelView):
    """Autocomplete that returns all Edition objects."""

    model = Edition
    search_lookups = ["name__icontains"]
    page_size = 20
    value_fields = ["id", "name", "year", "pages", "pub_num"]

    list_url = "edition-list"
    create_url = "edition-create"
    update_url = "edition-update"
    delete_url = "edition-delete"

    skip_authorization = True

• Purpose: Provides the backend logic for fetching autocomplete results, with filtering and ordering.

---

Views

We use standard Django views to render the form.

View for Bootstrap 4 Demo

def bootstrap4_demo(request: HttpRequest) -> HttpResponse:
    """View for the Bootstrap 4 demo page."""
    template = "example/basic_demos/bs4.html"
    context = {}

    context["form"] = Bootstrap4StylingForm()
    return TemplateResponse(request, template, context)

---

Design and Implementation Notes

Key Features

• Dynamic styling: Uses the preferred styling.

• Plugins: Includes plugins like clear_button and dropdown_footer to enhance UX.

Alternative Approaches

• Use the “default” styling if Bootstrap is not integrated into the project.

• Use additional plugins like dropdown_footer to add create and list buttons directly in the dropdown.

Potential Extensions

• Add dependent dropdowns where one field’s options are filtered based on another field’s selection.