Change school_select_form selects to select2

oioioi/oi/templates/forms/school_select_form.html

@@ -1,4 +1,18 @@
 {% load i18n %}
+
+{% block head %}
+<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>        
+{% endblock head %}
+
+{% block styles %}
+<style>
+    .select2-container {
+        width: 100% !important;
+    }
+</style>
+{% endblock styles %}
+
 {% for suffix, opts, selected in options %}
 <p>
 <select name="{{ attr.name }}{{ suffix }}" id="{{ attr.id }}{{ suffix }}">
@@ -10,8 +24,20 @@
 </select>
 </p>
 {% endfor %}
-{% if show_add_new %}
-    {% blocktrans %}
-        If you can not find your school on the list, please <button type="submit" class="btn btn-xs btn-link" name="_add_school">add it</button>.
-    {% endblocktrans %}
-{% endif %}
+{% blocktrans %}
+    If you cannot find your school on the list, please contact the organiser.
+{% endblocktrans %}
+
+{% block script %}
+<script>
+    $(document).ready(function() {
+        $('#id_school_province').select2();
+    });
+    $(document).ready(function() {
+        $('#id_school_city').select2();
+    });
+    $(document).ready(function() {
+        $('#id_school').select2();
+    });
+</script>
+{% endblock script %}