Django中的搜索栏

ddhy6vgd  于 2022-11-18  发布在  Go
关注(0)|答案(5)|浏览(203)

编辑:我设法使用'DjangoFilter'加入了一个搜索栏

我想在Django的模板中添加一个搜索栏
我想在上面的文章列表中包括一个搜索框,这样用户就可以通过数据进行搜索。
当我在酒吧里输入一些东西时,什么也没发生...
在我的代码下面
感谢您的帮助提前在HTML页面

<form class="form-inline my-2 my-lg-0">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" name="search" >
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>

在views.py

def article_overview(request):
    search_term = ''

    if 'search' in request.GET:
        search_term = request.GET['search']
        articles = Article.objects.all().filter(feeder__icontains=search_term) 

    articles = Article.objects.all()

    return render(request, 'overviews/overview.html', {'articles' : articles, 'search_term': search_term })

在overview.html(简化)中:

{% for article in articles %}
<a> {{article.feeder}} </a> 
{% endfor %}
wz3gfoph

wz3gfoph1#

在www.example.com中views.py,

class SearchView(ListView):
    model = Article
    template_name = 'search.html'
    context_object_name = 'all_search_results'

    def get_queryset(self):
       result = super(SearchView, self).get_queryset()
       query = self.request.GET.get('search')
       if query:
          postresult = Article.objects.filter(title__contains=query)
          result = postresult
       else:
           result = None
       return result

在你的模板中进行搜索查询、

<form class="add_your_class" method="GET" action="" >
    <input class="add_your_class" type="search" name="search"> 
    <button class="add_your_class" type="submit"> Search </button>
</form>

在模板中,您可以将其添加为显示结果

{% for result in all_search_results %}
   {{ .....add according to your model }}
{% empty %}
   add something to show no results
{% endfor %}
2wnc66cl

2wnc66cl2#

我的例子在我的例子中起作用:基本模板:

form class="form-inline my-2 my-lg-0" method="GET" action="{% url 'ecomm:search' %}" >
            <input class="form-control mr-sm-2" type="search" name="search">
            <button class="btn btn btn-outline-info my-2 my-sm-0" type="submit"> Search </button>
        </form>

搜索模板:

{% extends "ecomm/base.html" %}

{% block content %}
    {% for product in all_search_results %}
        <h3>{{product.title}}</h3>
        <p>{{product.description}}</p>
        <img src="{{ product.picture.url }}">
    {% empty %}
        <h2>No results found</h2>
    {% endfor %}
{% endblock %}

视图:

class SearchView(ListView):
    model = Products
    template_name = 'ecomm/search.html'
    context_object_name = 'all_search_results'

    def get_queryset(self):
        result = super(SearchView, self).get_queryset()
        query = self.request.GET.get('search')
        if query:
            postresult = Products.objects.filter(title__contains=query)
            result = postresult
        else:
            result = None
        return result

URL:

path('results/', ecomm_views.SearchView.as_view(), name='search'),
6psbrbz9

6psbrbz93#

假设您的文章保存在数据库中,您可以做的是为您的输入提供一个数据列表,使用 AJAX 将数据库中的文章预先填充到数据列表中,这样您就有了某种自动完成的下拉/搜索框。
www.example.com上有一个Teamtreehouse.com关于这个实现的优秀教程,这里是link

unhi4e5o

unhi4e5o4#

你在两个地方给article变量赋值,因此你覆盖了第一个。重命名if语句中的article变量,并将其传递给模板

if 'search' in request.GET:
    search_term = request.GET['search']
    search_result = Article.objects.all().filter(feeder__icontains=search_term) 

articles = Article.objects.all()

return render(request, 'overviews/overview.html', {'articles' : articles, 'search_result': search_result })
vxqlmq5t

vxqlmq5t5#

另一个简单的解决方案是使用DataTables,默认情况下它包含一个搜索栏。将您的字段放在每一行中,然后通过这种方式搜索出来。

<table id="articles" class="display" style="width:100%">
  <thead>
     <tr>
         <th>Feeder</th>
     </tr> 
  </thead>

  <tbody>
    {% for article in articles %}
      <tr>
          <td>{{article.feeder}</td> 
      </tr> 
    {% endfor %}
  </tbody>
</table>
<script>
$(document).ready(function () {
    $('#articles').DataTable();
});
</script>

相关问题