Change school_select_form selects to select2

oioioi/oi/templates/forms/school_select_form.html

@@ -1,4 +1,23 @@
-{% load i18n %}
+{% load i18n static %}
+
+{% block head %}
+<link href="{% static 'base/select2.min.css' %}" rel="stylesheet" />
+<script src="{% static 'base/js/select2.min.js' %}"></script>
+
+<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 }}">
@@ -15,3 +34,17 @@
         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 %}
+
+{% 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 %}