Enhance select options rendering

src/memopol/forms.py

@@ -26,6 +26,7 @@ class RepresentativeSearchForm(forms.Form):
         required=False,
         widget=autocomplete.ModelSelect2(
             url='chamber-autocomplete',
+            attrs={'data-html': 'true'}
         )
     )
     country = forms.ModelChoiceField(
@@ -33,7 +34,8 @@ class RepresentativeSearchForm(forms.Form):
         required=False,
         widget=autocomplete.ModelSelect2(
             url='group-autocomplete',
-            forward=(forward.Const('country', 'kind'),)
+            forward=(forward.Const('country', 'kind'),),
+            attrs={'data-html': 'true'}
         )
     )
     party = forms.ModelChoiceField(
@@ -41,7 +43,8 @@ class RepresentativeSearchForm(forms.Form):
         required=False,
         widget=autocomplete.ModelSelect2(
             url='group-autocomplete',
-            forward=(forward.Const('group', 'kind'),)
+            forward=(forward.Const('group', 'kind'),),
+            attrs={'data-html': 'true'}
         )
     )
     committee = forms.ModelChoiceField(
@@ -49,7 +52,8 @@ class RepresentativeSearchForm(forms.Form):
         required=False,
         widget=autocomplete.ModelSelect2(
             url='group-autocomplete',
-            forward=(forward.Const('committee', 'kind'),)
+            forward=(forward.Const('committee', 'kind'),),
+            attrs={'data-html': 'true'}
         )
     )
     delegation = forms.ModelChoiceField(
@@ -57,7 +61,8 @@ class RepresentativeSearchForm(forms.Form):
         required=False,
         widget=autocomplete.ModelSelect2(
             url='group-autocomplete',
-            forward=(forward.Const('delegation', 'kind'),)
+            forward=(forward.Const('delegation', 'kind'),),
+            attrs={'data-html': 'true'}
         )
     )
 
@@ -73,5 +78,6 @@ class DossierSearchForm(forms.Form):
         required=False,
         widget=autocomplete.ModelSelect2(
             url='chamber-autocomplete',
+            attrs={'data-html': 'true'}
         )
     )

src/memopol/static/css/custom.css

@@ -197,6 +197,19 @@ select:focus, select.form-control:focus {
     color: #fff !important;
 }
 
+.select2-icon-result {
+    display: flex;
+    flex-flow: row nowrap;
+}
+
+.select2-icon-result .group-icon {
+    flex-shrink: 0;
+}
+
+.select2-icon-result .select2-label {
+    flex-grow: 1;
+}
+
 /***************************************************************
 					Buttons
 ***************************************************************/
@@ -515,6 +528,14 @@ iframe {
     height: 1.75em;
 }
 
+.select2-icon-result .chamber-icon,
+.select2-icon-result .group-icon,
+.select2-icon-result .flag-icon {
+    width: 1.75em;
+    height: 1.75em;
+    margin-right: 0.5em;
+}
+
 .flag-icon:before {
     content: initial;
 }

src/memopol/templates/_base_search.html

@@ -63,5 +63,4 @@
       <button type="submit" class="btn btn-default">{% trans "Search" %}</button>
     </form>
   </div>
-
-</div>
\ No newline at end of file
+</div>

src/memopol/views/autocomplete.py

@@ -7,6 +7,7 @@ from django.db.models import Q
 from representatives.models import Representative, Chamber, Group
 from representatives_votes.models import Proposal
 from memopol_themes.models import Theme
+from ..templatetags import memopol_tags
 
 
 class RepresentativeAutocomplete(autocomplete.Select2QuerySetView):
@@ -55,10 +56,17 @@ class ChamberAutocomplete(autocomplete.Select2QuerySetView):
 
         return qs
 
+    def get_result_label(self, item):
+        icon = memopol_tags.chamber_icon(item)
+
+        return (u'<div class="select2-icon-result">%s'
+                u'<span class="select2-label">%s</span></div>' % (
+                    icon, item))
+
 
 class GroupAutocomplete(autocomplete.Select2QuerySetView):
     def get_queryset(self):
-        qs = Group.objects.all()
+        qs = Group.objects.select_related('chamber')
 
         kind = self.forwarded.get('kind', None)
         if kind:
@@ -68,3 +76,20 @@ class GroupAutocomplete(autocomplete.Select2QuerySetView):
             qs = qs.filter(Q(name__icontains=self.q))
 
         return qs
+
+    def get_result_label(self, item):
+        icon = None
+
+        if item.kind == 'group':
+            icon = memopol_tags.group_icon(item)
+        elif item.kind == 'country':
+            icon = memopol_tags.country_flag(item)
+        elif item.kind == 'committee' or item.kind == 'delegation':
+            icon = memopol_tags.chamber_icon(item.chamber)
+
+        if icon:
+            return (u'<div class="select2-icon-result">%s'
+                    u'<span class="select2-label">%s</span></div>' % (
+                        icon, item))
+        else:
+            return u'%s' % item