Подсказки автозаполнения Django не работают в текстовом поле строки поиска
Я хочу реализовать автозаполнение в поле поиска, которое находится в заголовке каждой веб-страницы (layout.html). Строка поиска ищет по типовому полю с именем 'Title'.
В то время как сам поиск работает, я не могу заставить автозаполнение работать, любая помощь будет высоко оценена.
Я также включу код поиска на случай, если они каким-то образом противоречат друг другу, чего я не определил.
Views.py
################# Поиск ##################### # пытается искать по названию, ИЛИ номеру, ИЛИ названию и номеру -> ищет замену '#' перед номером, если кто-то вводит его таким образом, не всегда работает с #. #работает с неполным именем ИЛИ полным именем ИЛИ номером ИЛИ полным именем и номером
@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>🔍</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>