Django autocomplete prompts are not working on a search bar text field

I am looking to implement autocomplete on a search field which is in the header of each webpage (layout.html). The search bar searches on a model field named 'Title'.

While the search itself is working, I cannot get autocomplete to work, any help is greatly appreciated.

I will include the search code as well in case they are somehow in conflict in a way I have not identified.

Views.py

################# Search ##################### # attempts to search for title, OR Number, OR Title And Number -> looks to replace the '#' before a number if someone enters it that way, it does not always work with # #It works with a partial name OR full name OR number OR Full Name and Number

@login_required(login_url="/login/")
def SearchPage(request):
    srh = request.GET.get('search')
    title = ""
    number = ""
    title_match = re.search(r'(.*)\b(#*\d+)', srh)
    if title_match:
        title = title_match.group(1)
        number = title_match.group(2)
        number = number.replace("#", "")
    else:
        title_number_match = re.search(r'(#*\d+)', srh)
        if title_number_match:
            number = title_number_match.group(1)
            number = number.replace("#", "")
        else:
            title = srh

    title = title.strip()
    number = number.strip()
    if title and number:
        comics = ComicInput.objects.filter(Title=title, Number=number,Category='Sell')
    elif title:
        comics = ComicInput.objects.filter(Title__icontains=title,Category='Sell')
    elif number:
        comics = ComicInput.objects.filter(Number__icontains=number,Category='Sell')
    else:
        comics = ComicInput.objects.filter(Category='Sell')
    params = {'comics': comics, 'search': srh}
    return render(request, 'app/search_page.html', params)

########################## Autocomplete Search Field ##############
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, 'layout.html')

urls.py

path('search/', views.SearchPage, name='search_page'),
path('layout/get_titles/', views.get_titles, name='get_titles'),

layout.html

<!DOCTYPE html>
{% load static %}
<html>
<head>
    <link rel="shortcut icon" type="image/png" href="{% static 'favicon.ico' %}"/>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
    {% load static %}
    <link rel="stylesheet" 
    <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="{% static 'app/scripts/modernizr-2.6.2.js' %}"></script>
</head>

<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="/" class="navbar-brand"> <i><strong></strong></i></a>
            </div>
            <div class="navbar-collapse collapse" style="font-size: medium;">
                <ul class="nav navbar-nav">
                    
                    <li>
                    <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>
                    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
                    <script>
                        $(function () {
                            $("#search").autocomplete({
                                source: '{% url 'get_titles' %}',
                                minLength: 2
                            });
                        });
                    </script>
                    </li>
                    <!-- <button type="submit" name="button">Submit</button> -->
                {% include 'app/loginpartial.html' %}
                </ul>

            </div>

</body>
</html>
Back to Top