Custom Select Widget with Icons in Django

You can solve this problem by creating a custom widget for your categoryList field that preserves your visual design while ensuring the selected data is properly submitted to the server.

Solution: Create a Custom Select Widget

Django allows you to create custom widgets by subclassing existing ones. In your case, you can create a custom widget that extends the Select widget to include your SVG icons and custom HTML structure.

1. Create a Custom Widget

PYTHONCopied
from django import forms
from django.utils.safestring import mark_safe

class CategorySelectWithIcon(forms.Select):
    def create_option(self, name, value, label, selected, index, subindex=None, attrs=None):
        option = super().create_option(name, value, label, selected, index, subindex, attrs)
        if value:
            # Add any category-specific data you need here
            option_html = f'''
            <div class="categorie-dropdown-item-div" aria-expanded="false" aria-haspopup="true">
                <svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="32" width="32">
                    <g fill="#3e4153">
                        <path d="M20.45 4h-5.67a.51.51 0 00-.5.5.5.5 0 00.5.5H20v5.17a3.351 3.351 0 01-.84 2.48l-8 7.9a1.76 1.76 0 01-1.25.51 1.78 1.78 0 01-1.25-.51l-4-4A2.26 2.26 0 014 14.91a2.23 2.23 0 01.66-1.59c0-.05 5.37-5.14 6.56-6.34a.481.481 0 000-.7.5.5 0 00-.71 0C9.28 7.46 4 12.54 3.91 12.6a3.26 3.26 0 000 4.62l4 4a2.7 2.7 0 002 .81 2.771 2.771 0 002-.8l8-7.94A4.32 4.32 0 0021 10.17V4.5a.5.5 0 00-.55-.5z"></path>
                        <path d="M17 10a2 2 0 10-1.41-.58A1.94 1.94 0 0017 10zm-1-2a1 1 0 112 0 1 1 0 01-2 0zM10.86 11.84l.63-.63a1.48 1.48 0 00-2-.19L9 10.5l-.49.5.51.51a1.49 1.49 0 00.13 2.06c.63.64 1.32.53 2.23.09.71-.35 1.09-.42 1.39-.12a.76.76 0 01-.06 1.16.88.88 0 01-1.37 0l-.63.62a1.61 1.61 0 002.28.15l.52.51.49-.48-.56-.5a1.53 1.53 0 00-.09-2.15c-.57-.58-1.18-.58-2.26-.06-.68.3-1 .42-1.37.08a.67.67 0 010-1 .74.74 0 011.14-.03z"></path>
                    </g>
                </svg>
                <span>{label}</span>
            </div>
            '''
            option['label'] = mark_safe(option_html)
        return option

    def render(self, name, value, attrs=None, renderer=None):
        # Add custom classes to the select element
        if attrs is None:
            attrs = {}
        attrs.update({
            'class': 'searchbar-in-dropdown-menu custom-select',
            'id': 'searchbar-in-dropdown-menu'
        })
        return super().render(name, value, attrs, renderer)

2. Update Your Form

PYTHONCopied
class AdsSearchForm(forms.Form):
    searchBarInput = forms.CharField(
        required=False, 
        label="Que recherchez-vous ?", 
        max_length=255, 
        widget=forms.TextInput(attrs={
            "id": "main-searchbar-input-text", 
            "class": "main-searchbar-input-text"
        })
    )
    categoryList = forms.ModelChoiceField(
        queryset=Categorie.objects.all(), 
        required=False,
        widget=CategorySelectWithIcon()
    )

3. Add CSS to Style the Select Element

You'll need to add CSS to make the select element look like your custom dropdown:

CSSCopied
.custom-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: transparent;
    border: none;
    width: 100%;
    cursor: pointer;
}

.custom-select option {
    padding: 10px;
}

/* Style for the container to match your current design */
.searchbar-in-dropdown-menu {
    /* Add your existing styles here */
}

4. JavaScript for Enhanced Functionality

You might need some JavaScript to handle the selection and display:

JAVASCRIPTCopied
document.addEventListener('DOMContentLoaded', function() {
    const select = document.getElementById('searchbar-in-dropdown-menu');
    
    // Handle selection changes
    select.addEventListener('change', function() {
        // Update any visual elements as needed
        const selectedOption = this.options[this.selectedIndex];
        // Additional logic here
    });
});

Alternative Approach: Hidden Form Field

If the custom widget approach doesn't provide enough flexibility, you can:

1. Keep your current UL/LI structure for display
2. Add a hidden form field that gets updated when a selection is made

PYTHONCopied
class AdsSearchForm(forms.Form):
    searchBarInput = forms.CharField(required=False, label="Que recherchez-vous ?", max_length=255, 
                                    widget=forms.TextInput(attrs={"id":"main-searchbar-input-text", "class":"main-searchbar-input-text" }))
    categoryList = forms.ModelChoiceField(queryset=Categorie.objects.all(), required=False, 
                                         widget=forms.HiddenInput(attrs={"id": "hidden-category-field"}))

Then update your JavaScript to set the hidden field value:

JAVASCRIPTCopied
function dropdownItemSelected(index) {
    // Get the category ID from your data
    const categoryId = getCategoryIdFromIndex(index);
    
    // Update the hidden form field
    document.getElementById('hidden-category-field').value = categoryId;
    
    // Update visual display as needed
    // ...
}

This approach gives you complete control over the visual presentation while ensuring the form data is properly submitted.