skip to Main Content

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.

2

Answers


  1. Chosen as BEST ANSWER

    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> 
    

    source:https://www.youtube.com/watch?v=AGtae4L5BbI


  2. The ul element is used to create an unordered list in Html and must contine at least on li , so you must add li around form element in navbar.html,so try this, and show the error

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search