My autocomplete field shows and works perfectly on the admin page, but when trying to generate it out of the admin, it shows as a thin vertical line. How can I fix this issue? 
forms.py
def student_form(request):
if request.method == 'POST':
form = StudentForm(request.POST)
if form.is_valid():
form.save()
return redirect('student_form')
else:
form_class = StudentForm
return render(request, 'form.html', {'form': form_class})
class CourseAutocomplete(autocomplete.Select2QuerySetView):
def get_queryset(self):
qs = CourseInstance.objects.all()
if self.q:
qs = qs.filter(course_name__istartswith=self.q)
return qs
views.py
class StudentForm(autocomplete.FutureModelForm):
first_name = forms.CharField(label= 'First Name ', widget=forms.TextInput)
last_name = forms.CharField(label = 'Last Name ', widget=forms.TextInput)
uni = forms.CharField(label = 'UNI ', widget=forms.TextInput)
email = forms.CharField(label = 'Email ', widget=forms.TextInput)
phone = forms.CharField(label = 'Phone number (optional)')
time_zone = forms.ChoiceField(
choices = TIME_ZONE_CHOICES,
label = 'Time zone ')
time_management = forms.ChoiceField(
choices = TIME_MANAGEMENT_CHOICES,
initial = 0,
widget = forms.RadioSelect(attrs={'display': 'inline-block',}),
label = 'How do you manage your time for assignments?')
collaborative = forms.ChoiceField(
choices = COLLABORATIVE_CHOICES,
widget = forms.RadioSelect,
label = 'How collaborative are you?')
academic_seriousness = forms.ChoiceField(
choices = SERIOUSNESS_CHOICES,
widget = forms.RadioSelect,
label = 'How serious of a student are you?')
extroverted = forms.ChoiceField(
choices = EXTROVERTED_CHOICES,
widget = forms.RadioSelect,
label = 'How extroverted are you?')
discovery = forms.MultipleChoiceField(choices = DISCOVERY_CHOICES,
widget = forms.CheckboxSelectMultiple)
fun_facts = forms.CharField(widget=Textarea)
course_instances = forms.ModelMultipleChoiceField(
queryset = CourseInstance.objects.all(),
widget = autocomplete.ModelSelect2Multiple(url='course-autocomplete'))
class Meta:
model = Student
fields = ['first_name', 'last_name', 'uni', 'email', 'phone','time_zone', 'time_management',
'collaborative', 'academic_seriousness', 'extroverted', 'discovery','fun_facts','course_instances']
urls.py
urlpatterns = [
path('',views.index,name = 'index'),
path('form/', views.student_form, #UpdateView.as_view(),
name='student_form'),
url(
r'course-autocomplete/$',
CourseAutocomplete.as_view(),
name = 'course-autocomplete',
),
]
form.html
{% extends "base_generic.html" %}
{% load static %}
{% block content %} {# assuming you have a content block within your <body> element #}
<form method="POST">
{% csrf_token %}
{{ form.as_p }}
<button type="submit">Submit</button>
</form>
{% endblock %}
{% block footer %}
<script type="text/javascript" src="{% static 'admin/js/vendor/jquery/jquery.js' %}"></script>
{{ form.media }}
{% endblock %} 
