Django Search Bar Autocomplete is not populating at all

Question

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>&#x1F50D;</span>
                            </button>
                        </form>

Django Search Bar Autocomplete is not populating at all

0 Answers0