Django导航栏Bootstrap搜索栏无响应，需二次搜索才生效求助

问题现象 #

1. 导航栏中的Bootstrap搜索栏点击搜索按钮无响应；
2. 注释掉search_journal.html内置搜索表单后，首次搜索跳转结果页无内容，需再次搜索才显示结果；
3. 直接将表单代码粘贴到navbar.html也无法解决问题。

相关代码 #

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"),

问题根源分析 #

1. 导航栏表单无响应：HTML规范中<ul>的直接子元素只能是<li>，直接将<form>放在<ul>内会导致DOM结构不合法，浏览器无法正确识别表单提交事件；
2. 首次搜索无内容：导航栏的提交按钮缺少name="submit"属性，后端submitbutton = request.GET.get('submit')无法获取值，而前端模板判断结果的条件依赖submitbutton == 'Search'，因此首次搜索时结果不会渲染。

修复方案 #

1. 修复导航栏DOM结构并完善按钮属性 #

修改navbar.html中的表单部分，将其包裹在<li>内，并给提交按钮添加name="submit"和value="Search"：

<li>
  <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" name="submit" value="Search">Search</button>
  </form>
</li>

2. 简化后端视图逻辑 #

移除对submitbutton的依赖，只要存在搜索关键词就执行查询：

@login_required
def search_journal(request):
    query = request.GET.get('q', '').strip()
    results = []
    
    if query:
        lookups = Q(title__icontains=query) | Q(content__icontains=query)
        results = Journal.objects.filter(lookups).distinct()
    
    context = {
        'results': results,
        'query': query
    }
    return render(request, 'audioJournaling/search_journal.html', context)

3. 更新前端模板判断条件 #

改用传递的query变量判断是否展示搜索结果，不再依赖submitbutton：

{% if query %}
  {% if results %}
    <h1>Results for <b>{{ query }}</b></h1>
    <br/><br/>
    <!-- 原有结果展示代码保持不变 -->
  {% else %}
    No search results for this query
  {% endif %}
{% endif %}

验证效果 #

完成以上修改后，导航栏搜索按钮点击会正常提交表单，首次搜索即可直接展示结果，无需二次操作。

内容的提问来源于stack exchange，提问作者lilsnow02