Building a Social Media Site With Python and Django: Part 8 User Search

2 min readFeb 17, 2021

In this tutorial, we are going to get the user search bar that has been in our navbar working. We will use the Q object that comes with Django to get this working. We will need to make some changes to our navbar first.

Updating the Navbar

We need to add a method and an action to the form, this action url isn’t created yet, but we will name the url pattern the same as this when we create it later. We also need to add a submit button, for this we will use a font awesome icon. We also need to add a name and a value to the input field. We will use the name to get the value later in our view, the value will keep whatever we typed in filled in the input field.

landing/templates/landing/navbar.html:

<form class="d-flex" method="GET" action="{% url 'profile-search' %}">
            <div class="input-group">
                <span class="input-group-text" id="basic-addon1">@</span>
                <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1" name='query' value="{{ request.GET.query }}">
                <button style="border: none; background-color: transparent; box-shadow: none" type="submit"><i class="fas fa-search"></i></button>
            </div>
</form>

Adding The Search View and URL

Now that we have the template set up to go to the search url, let’s make the view and then add the url path after that. First thing we need to do is use the generic View class and add a get method since that is the type of request that our form is sending. Next, we need to get the value from the name attribute in our form, we can do this with self.request.GET.get(‘query’). After that we can use the Q object to filter by the username on the profiles. Finally, we will render the template with the profile_list in the context.

social/views.py:

class UserSearch(View):
    def get(self, request, *args, **kwargs):
        query = self.request.GET.get('query')
        profile_list = UserProfile.objects.filter(
            Q(user__username__icontains=query)
        )        context = {
            'profile_list': profile_list
        }        return render(request, 'social/search.html', context)

social/urls.py:

path('search/', UserSearch.as_view(), name='profile-search'),

Adding the Search Template

The final step to get this working is to create the search.html template. This will be pretty straight forward, we will just loop through the profiles that it matched with and list out the username, location and how many followers they have.

social/templates/social/search.html:

{% extends 'landing/base.html' %}{% block content %}
<div class="container">
    {% for profile in profile_list %}
    <div class="row justify-content-center mt-3">
        <div class="col-md-5 col-sm-12 border-bottom position-relative">
            <div class="position-relative">
                <p><a style="text-decoration: none;" class="text-primary" href="{% url 'profile' profile.pk %}">@{{ profile.user }}</a></p>
                {% if profile.location %}
                <p>{{ profile.location }}</p>
                {% endif %}
                <p>Followers: {{ profile.followers.all.count }}</p>
            </div>
        </div>
    </div>
    {% endfor %}
</div>
{% endblock content %}