时间戳

首页 > 解决方案 > Bootstrap 搜索框使用了错误的 url

django - Bootstrap 搜索框使用了错误的 url

问题描述

这是我在 stackoverflow 上的第一篇文章，我对 Bootstrap 和 Django 很陌生，可能这是一件愚蠢的事情，但我找不到解决方案。Bootstrap 导航栏上的 SearchBox 没有转到正确的 url。

我正在尝试在我的测试项目中使用 ListView 添加搜索引擎。如果我使用简单的 html 搜索表单，它可以工作，它使用正确http://127.0.0.1:8000/crmapp/search/?q=SearchedText的 url () 并从数据库中获取结果。但是，如果我使用 NavBar (Bootstrap4) 上的搜索框，它不会转到正确的 url，也不会带来任何东西。在我的浏览器上，我看到它将会http://127.0.0.1:8000/?q=SearchedText.

我的导航栏上的其他链接工作正常。我不知道它是否相关，但如果我将 ListView 模板扩展到 base.html，它们甚至不会显示简单的 html。当我删除{% extends 'base.html' %}时，页面显示内容正常。

**base.html**
    <!--Navbar Starts Here-->
    <nav class="navbar navbar-expand-lg navbar-light bg-light mb-4">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="{% url 'home' %}">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item active">
            <a class="nav-link" href="{% url 'crmapp' %}">CrmApp <span class="sr-only">(current)</span></a>
          </li>
        </ul>
        {% if user.is_authenticated %}


          <ul class="navbar-nav">
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                {{user.username}}
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">Change password</a>
                <a class="dropdown-item" href="#">Edit Profile</a>
                <a class="dropdown-item" href="{% url 'mytasks' %}">My Tasks</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="{% url 'logoutuser' %}">Logout</a>
              </div>
            </li>
          </ul>
          <form class="form-inline my-2 my-lg-0">    
          <input class="form-control mr-sm-2" name='q' type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit" value='Search'>Search</button>
        </form>
        {% else %}

          <a class="btn btn-outline-secondary" href="{% url 'loginuser' %}">Login</a>
          <a class="btn btn-primary ml-2 mr-2" href="{% url 'registeruser' %}">Register</a>  

          <form class="form-inline my-2 my-lg-0" method='GET' action="{% url 'search_results' %}">
            <input class="form-control mr-sm-2" type="search" name='q' value={{request.GET.q}} placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
          </form>
        {% endif %}
      </div>
    </nav>
    <!--Navbar Ends-->

工作正常的简单搜索表单：

<form action="{% url 'search_results' %}" method="get">
  <input name="q" type="text" placeholder="Search...">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit" value='Search'>Search</button>
</form>

网址.py

path('search/', TaskSearch.as_view() , name='search_results'),

视图.py

class TaskSearch(ListView):
    model = Tasks
    template_name = 'search_results.html'

    def get_queryset(self):
        query= self.request.GET.get('q')
        object_list = Tasks.objects.filter ( Q(subject__icontains=query) | Q(status__icontains=query) )
        return object_list

你能帮我修复导航栏中的搜索框吗

标签： djangobootstrap-4django-forms

解决方案

案例中没有在您的模板中<form>指定：{% if ... %}action="..."

{% if user.is_authenticated %}
    ...
    <form class="form-inline my-2 my-lg-0" action="{% url 'search_results' %}" method="get">    
        <input class="form-control mr-sm-2" name='q' type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit" value='Search'>Search</button>
    </form>
{% else %}
    ...
{% endif %}

推荐阅读