I have made a search bar on the navigation bar. What I want to do is I can directly search it on the search bar on navigation bar, then when I hit the search button, it show show the result. However, when I search it, it has no response. I was wondering is it because I have made a separated file for my navigation bar - navbar.html. So that I just can make links on the navigation bar?
navbar.html
<nav>
<ul>
{% if user.is_authenticated %}
<form class="form-inline" action="{% url 'search_journal' %}" method="GET">
<input class="form-control mr-sm-2" type="search" name="q" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
<li><a href="{% url 'journal_list' %}">HOME</a></li>
<li><a href="{% url 'journal_list_favourite' %}">FAVORITE</a></li>
<li><a href="{% url 'logout' %}">LOGOUT</a></li>
<li class="profile">
<div class="profile-img-container">
<a href="{% url 'profile' %}"><img id="profile-img" src="{{ user.profile.image.url }}" alt="Profile Picture"></a>
</div>
<li class="nav-item">
<a class="nav-link active" href="#">Hi {{user.username}}</a>
</li>
{% else %}
<li class="nav-item">
<a>Please Login!</a>
</li>
{% endif %}
</ul>
</nav>
views.py
@login_required
def search_journal(request):
if request.method == 'GET':
query= request.GET.get('q')
submitbutton= request.GET.get('submit')
if query is not None:
lookups= Q(title__icontains=query) | Q(content__icontains=query)
results= Journal.objects.filter(lookups).distinct()
context={'results': results,
'submitbutton': submitbutton}
return render(request, 'audioJournaling/search_journal.html', context)
else:
return render(request, 'audioJournaling/search_journal.html')
else:
return render(request, 'audioJournaling/search_journal.html')
search_journal.html
{% extends "base.html" %}
{% block content %}
<h1>Search Page</h1>
<br/>
<!-- <form action="{% url 'search_journal' %}" method="GET" value="{{request.GET.q}}">
Search <input type="text" name="q" value="{{request.GET.q}}" placeholder="Search posts"/>
<input type="submit" name="submit" value="Search"/>
</form> -->
{% if submitbutton == 'Search' and request.GET.q != '' %}
{% if results %}
<h1>Results for <b>{{ request.GET.q }}</b></h1>
<br/><br/>
<div class = "container mt-4 mb-4">
<div class="center_journal">
<div class="col">
<div class="row">
{% for result in results %}
<div class="card col-4 " style="width: 36rem;">
<h5 class="card-title text-center mt-4">{{ result.title }}</a></h5>
{% if result.photo %}
<img src="{{ result.photo.url }}" class="card-img-top" alt="...">
{% endif %}
<div class="card-body">
{% if result.audio %}
<audio controls>
<source src="{{ result.audio.url }}" type="audio/ogg">
<source src="{{ result.audio.url }}" type="audio/mpeg">
<source src="{{ result.audio.url }}" type="audio/wav">
Your browser does not support the audio element.
</audio>
{% endif %}
<p class="card-content">{{ result.content }}</p>
<p class="text-center font-weight-light">Created on {{ result.date_created|date:'Y-m-d H:i' }}</p>
{% if result.favourite %}
<div class="text-center">
<button type="button" class="btn btn-outline-info">Favourite</button>
</div>
{% endif%}
<div class="text-center">
<a href="{% url 'journal_detail' result.id %}" ><button class=" btn btn-outline-info">View</button></a>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
{% else %}
No search results for this query
{% endif %}
{% endif %}
{% endblock %}
urls.py
path('search/',views.search_journal,name="search_journal"),
When I comment out the code line in search_journal.html,
<form action="{% url 'search_journal' %}" method="GET" value="{{request.GET.q}}">
Search <input type="text" name="q" value="{{request.GET.q}}" placeholder="Search posts"/>
<input type="submit" name="submit" value="Search"/>
</form>
I will get something like this:
For example I type 's' in the search bar:
search for s
I will get:
result
I will need to search again to get the result.
I have also tried to just paste the code to navbar.html, but it doesn't work.
I have found the solution:
views.py
@login_required
def search_journal(request):
if request.method == "POST":
searched = request.POST['searched']
journals = Journal.objects.filter(Q(title__icontains=searched) | Q(content__icontains=searched)).order_by("-date_created")
context={'searched':searched,'journals':journals}
return render(request, 'audioJournaling/search_journal.html', context)
else:
return render(request, 'audioJournaling/search_journal.html',{})
search_journal.html
{% block content %}
{% if searched %}
<br/>
<div class="text-center">
<h1>You Searched For {{ searched }}</h1>
</div>
<br/>
<div class = "container mt-4 mb-4">
<div class="center_journal">
<div class="col">
<div class="row">
{% for journal in journals %}
<div class="card col-4 " style="width: 36rem;">
<h5 class="card-title text-center mt-4">{{ journal.title }}</a></h5>
{% if journal.photo %}
<img src="{{ journal.photo.url }}" class="card-img-top" alt="...">
{% endif %}
<div class="card-body">
{% if journal.audio %}
<audio controls>
<source src="{{ journal.audio.url }}" type="audio/ogg">
<source src="{{ journal.audio.url }}" type="audio/mpeg">
<source src="{{ journal.audio.url }}" type="audio/wav">
Your browser does not support the audio element.
</audio>
{% endif %}
<p class="card-content">{{ journal.content }}</p>
<p class="text-center font-weight-light">Created on {{ journal.date_created|date:'Y-m-d H:i' }}</p>
{% if journal.favourite %}
<div class="text-center">
<button type="button" class="btn btn-outline-info">Favourite</button>
</div>
{% endif%}
<div class="text-center">
<a href="{% url 'journal_detail' journal.id %}" ><button class=" btn btn-outline-info">View</button></a>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
{% else %}
<h1>Hey! You Forgot To Search For A Journal...</h1>
{% endif %}
{% endblock %}
navbar.html
<li class="mr-auto ml-auto">
<form class="form-inline" method="POST" action="{% url 'search_journal' %}" >
{% csrf_token %}
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" name ="searched">
<button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
</form>
</li>