I am in the process of creating a web application that necessitates searching for a specific user record by inputting either the first name OR last name. While two more search attributes will be added in the future, I am currently facing issues with incorporating two autocomplete-light drop-downs in the same template. The crux of the problem lies in the fact that only the second drop-down functions correctly.
Below are the pertinent code snippets (with extraneous code removed). Although this method may not be the most efficient, my main focus is on achieving a functional implementation before delving into optimizations or refactoring.
forms.py
class StudentChoiceFieldLN(forms.Form):
students = forms.ModelChoiceField(
queryset=Student.objects.all().order_by("last_name"),
widget=autocomplete.ModelSelect2(url='student-ln-autocomplete'),
)
def __init__(self, *args, **kwargs):
super(StudentChoiceField, self).__init__(*args, **kwargs)
self.fields['students'].queryset = Student.objects.all().order_by("last_name")
self.fields['students'].label_from_instance = lambda obj: "%s %s" % (obj.last_name, obj.first_name)
class StudentChoiceFieldFN(forms.Form):
students = forms.ModelChoiceField(
queryset=Student.objects.all().order_by("first_name"),
widget=autocomplete.ModelSelect2(url='student-fn-autocomplete'),
)
def __init__(self, *args, **kwargs):
super(StudentChoiceFieldFN, self).__init__(*args, **kwargs)
self.fields['students'].queryset = Student.objects.all().order_by("first_name")
self.fields['students'].label_from_instance = lambda obj: "%s %s" % (obj.last_name, obj.first_name)
views.py
class StudentLNAutoComplete(autocomplete.Select2QuerySetView):
def get_queryset(self):
qs = Student.objects.all()
if self.q:
qs = qs.filter(last_name__istartswith=self.q)
return qs
class StudentFNAutoComplete(autocomplete.Select2QuerySetView):
def get_queryset(self):
qs = Student.objects.all()
if self.q:
qs = qs.filter(first_name__istartswith=self.q)
return qs
def index(request):
students_choice_ln = StudentChoiceFieldLN()
students_choice_fn = StudentChoiceFieldFN()
context = {
'students_choice_ln': students_choice_ln,
'students_choice_fn': students_choice_fn,
'selected_student': None
}
return render(request, 'awards/index.html', context)
urls.py
from awards.views import StudentLNAutoComplete
from awards.views import StudentFNAutoComplete
urlpatterns = [
...
path('student-ln-autocomplete/', StudentLNAutoComplete.as_view(), name='student-ln-autocomplete'),
path('student-fn-autocomplete/', StudentFNAutoComplete.as_view(), name='student-fn-autocomplete'),
...
]
awards/index.html
Note the placement of the {{ students_choice_fn.media }} declaration. I attempted to relocate this declaration based on suggestions from related Stack Overflow posts, as I suspect that the issue stems from how the relevant css/javascript for autocomplete-light is rendered, resulting in the malfunction of the first field.
{% extends "base.html" %}
{% block content %}
<body>
{{ students_choice_fn.media }}
<div class="container">
<div class="row">
<div class="col-md-6">
<form method=POST action="/awards/select">
{% csrf_token %}
{{ students_choice_ln }}
{{ students_choice_fn }}
<input type="submit" value="select">
</form>
<br>
<h4> {{ selected_student.first_name }} {{ selected_student.last_name }} </h4>
{% if selected_student %}
....
{% endif %}
</div>
<div class="col-md-6">
....
</div>
</div>
</div>
</body>
{% endblock %}
The issue persists where only the second autocomplete dropdown functions, with the first dropdown displaying as an empty, non-responsive dropdown. Here is a screenshot for reference:
https://i.sstatic.net/tLEdK.png
Though there are threads discussing similar concepts, I was unable to find a solution for my specific problem:
How to use django-autocomplete-light on form with multiple charfields
https://github.com/yourlabs/django-autocomplete-light/issues/814
Your assistance is greatly appreciated!