[REVIEW] 261 - Improve dropdown menu exhibition

src/ARte/core/forms.py

@@ -4,6 +4,25 @@
 class UploadFileForm(forms.Form):
     file = forms.ImageField(required=False)
 
+class ListTextWidget(forms.TextInput):
+    def __init__(self, *args, **kwargs):
+        super(ListTextWidget, self).__init__(*args, **kwargs)
+        self._name = 'exhibit-list'
+        self._list = Exhibit.objects.all().order_by('name')
+        self.attrs.update({'list':f'list__{self._name}'})
+
+    def render(self, name, value, attrs=None, renderer=None):
+        text_html = super(ListTextWidget, self).render(name, value, attrs=attrs)
+        data_list = f'<datalist id="list__{self._name}">'
+        for item in self._list:
+            data_list += f'<option value="{item.slug}">{item.name}</option>'
+        data_list += '</datalist>'
+        return (text_html + data_list)
 
 class ExhibitForm(forms.Form):
-    exhibit = forms.ModelChoiceField(queryset=Exhibit.objects.all().order_by('name'))
+   exhibit = forms.CharField(required=True)
+
+   def __init__(self, *args, **kwargs):
+        super(ExhibitForm, self).__init__(*args, **kwargs)
+        self.fields['exhibit'].widget = ListTextWidget()
+        self.fields['exhibit'].label = ""

src/ARte/core/jinja2/core/exhibit_select.jinja2

@@ -14,40 +14,16 @@
 
         <div class="exhibit-form">
             <h2>{{_("Choose the Exhibition you're seeing")}}</h2>
-            <div class="search-area">
-                <input type="text" id="search-box" name="search" onkeyup="findExhibit()" autocomplete="off" />
-            </div>
-            <form name="exhibit-form" action="{{url('exhibit_select')}}" method="post">
+            <form name="exhibit-form" action="{{url('exhibit_select')}}" method="post" autocomplete="off">
                 {{ csrf_input }}
-                {% for field in form.visible_fields() %}
-                    <p class="exhibit-field {{field.name}}">
-                        {{ field }}
-                        {{ field.errors }}
-                    </p>
-                {% endfor %}
+                {{form}}
                 <input class="submit-btn" type="submit" value="{{ _('Submit') }}"/>
             </form>
         </div>
     </div>
     <script>
         let field = document.getElementById('id_exhibit');
         field.style="padding: 0";
-
-        function findExhibit() {
-            let field = document.getElementById('id_exhibit').options;
-            let searchValue = document.getElementById("search-box").value;
-            for (keys in field) {
-                if (field[keys].innerHTML !== undefined) {
-                    let valueField = field[keys].innerHTML
-                    if (valueField.toUpperCase().indexOf(searchValue.toUpperCase()) > -1 && searchValue != "") {
-                        field[keys].selected = "selected";
-                    } else {
-                        field[keys].selected = "";
-                    }
-                }
-            }
-        }
-
         $('#id_exhibit').on('change',function(e){
             if($(this).prop('value') != ''){
                 $('input[type="submit"]').prop('disabled', false);

src/ARte/core/views.py

@@ -88,7 +88,7 @@ def exhibit_select(request):
         form = ExhibitForm(request.POST)
         if form.is_valid():
             exhibit = form.cleaned_data.get('exhibit')
-            return redirect("/" + exhibit.slug)
+            return redirect("/" + exhibit)
     else:
         form = ExhibitForm()