I'm looking to use autocomplete to show the items already populated in the 'ComicInputs' model filed named 'Title'. It will not work after trying a few different options. I'm using a JsonResponse in this version.
Models.py
class ComicInput(models.Model):
Title = models.CharField(max_length=50,default='', blank=False, help_text="Comic Book title")
Views.py
from django.http import JsonResponse
@require_GET
def get_titles(request):
if 'term' in request.GET:
qs = ComicInput.objects.filter(Title__icontains=request.GET.get('term'))
titles = list(qs.values_list('Title', flat=True))
return JsonResponse(titles, safe=False)
return render(request, 'app/layout.html')
Urls.py
path('layout/get_titles/', views.get_titles, name='get_titles')
layout.html
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="{% static 'app/content/bootstrap.min.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'app/content/site.css' %}" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>
<script src="{% static 'app/scripts/modernizr-2.6.2.js' %}"></script>
<script>
$(function () {
$("#search").autocomplete({
source: '{% url 'get_titles' %}',
minLength: 2
});
});
</script>
</head>
<form action="{% url 'search_page' %}" method="get" class="search-bar" style="width: 200px; height: 30px;font-size: small; align: top;" >
<input type="search" id ="search" name="search" pattern=".*\S.*" value="Search Collections by Title" onFocus="this.value=''" required>
<button class="search-btn" type="submit" style="background-color: #FFFFFF;">
<span>🔍</span>
</button>
</form>