Django Tutorial #8: Search

Django Tutorial #8: Search

Please note that this post may contain affiliate links, and for every purchase you make, at no extra cost to you, a commission fee will be rewarded to me.

You can download the source code of this tutorial here.

The search function is a fundamental feature for almost all websites, and in this article, we’ll talk about how to implement basic search in our Django project.

A search function consists of three parts, a search form that allows users to pass queries to the back end, a piece of code that does the search, and a template that displays the results of the search.

Search Form

Now, let’s add a search form into our sidebar:

<!-- Search Widget -->
<div class="card my-4">
    <h5 class="card-header">Search</h5>
    <form class="card-body" action="{% url 'search' %}" method="GET" role="search">
        <div class="input-group">
            <label>
                <input type="text" class="form-control" placeholder="Search for..." name="q">
            </label>
            <span class="input-group-btn">
            <button class="btn btn-secondary" type="submit">Go!</button>
          </span>
        </div>
    </form>
</div>

Line 7, adds name attribute to the input field, its value could be anything, here we’ll call it q.

When the button is clicked, it’ll go to /search, so we need to register the corresponding URL pattern.

path('search', views.search, name='search'),

Search View

def search(request):
    general = General.objects.first()
    query = request.GET.get('q', '')
    if query:
        posts = Post.objects.filter(title__icontains=query)
    else:
        posts = []
    return render(request, 'blog/search.html', {
        'general': general,
        'posts': posts,
        'query': query,
    })

Line 3, this line of code will get whatever is in that input box and assign it to query.

Line 5, This will get a group of posts whose title contains query. There are a lot more lookup methods other than contains: https://docs.djangoproject.com/en/3.1/topics/db/queries/#contains

Search Template

{% extends "blog/master.html" %}

{% block meta %}

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="{{ general.description }}">
    <meta name="author" content="">

{% endblock %}


{% block content %}

    <!-- Page Content -->
    <div class="container">
        <div class="row">
            <!-- Blog Entries Column -->
            <div class="col-md-8">
                <h1 class="my-4">Search Result For:
                    <small>{{ query }}</small>
                </h1>
                {% include 'blog/vendor/post_list.html' %}
            </div>
            {% include 'blog/vendor/sidebar.html' %}
        </div>
        <!-- /.row -->
    </div>
    <!-- /.container -->

{% endblock %}

Leave a Reply

Your email address will not be published. Required fields are marked *