Django Tutorial #8: Search

    Django Tutorial #8: Search

    More Tutorials on Web Development


    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 *