Search Bar in Django - django

Question

EDIT: I managed to include a Search bar using 'DjangoFilter'
I would like to add a search bar to my template in Django
I would like to include a search box in above a list of articles so users can search through the data.
When I enter something in the bar nothing happens though...
here below my code
Thanks for the help in advance
In HTML page
<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>
In 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 })
in overview.html(simplified):
{% for article in articles %}
<a> {{article.feeder}} </a>
{% endfor %}

Answer 1

In 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
In your template to search query,
<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>
In templates you can add it as to show results
{% for result in all_search_results %}
{{ .....add according to your model }}
{% empty %}
add something to show no results
{% endfor %}

Answer 2

My example worked in my case:
base template:
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>
search template:
{% 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 %}
the view:
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
the url:
path('results/', ecomm_views.SearchView.as_view(), name='search'),

Answer 3

Another simple solution is to use DataTables which inlcude a search bar by default. Put your fields in each row and search it out that way.
<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>

Answer 4

Assuming that you have your articles saved in your database, what you can do is have a datalist for your input, use AJAX to prepopulate the datalist with the articles from your database so that you have some sort of an autocomplete dropdown/search box.
There's an excellent tutorial from Teamtreehouse.com for this implementation. Here's the link.

Answer 5

You are assigning article variable in two places, therefore you're overwriting the first one. Rename article variable inside if statement and pass that to template
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 })