How to Get Google Search Suggestions Using Python and Django

Introduction

In this tutorial, we will be building a Django app that gets Google search suggestions from Google using Python. For this tutorial, we will be using Django as our web server for building the web app and requests library to make HTTP requests.

Library Installation

To install the above-mentioned libraries run the commands below in your terminal.

pip3 install requests

pip3 install Django

Project setup

Now to begin, run the command below to create our project.

django-admin startproject google_autocomplete

After running the command above a folder was created, now cd into the folder and run the command below to create an app.

python3 manage.py startapp autocomplete

Add app to the project

Now we need to add our application autocomplete to the project, to do this enter the following code in the settings.py file inside the google_autocomplete folder.

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'autocomplete',
]

Create search suggestions fetch view

Now let’s create a view to fetch the suggestions as shown below in the views.py file.

from django.shortcuts import render
import requests

def fetch_autocomplete(query):
    url = f"http://suggestqueries.google.com/complete/search?output=chrome&q={query}"
    r = requests.get(url)
    suggestions = r.json()[1]
    return suggestions

def autocomplete(request):
    query = request.GET.get('query', '')
    suggestions = []

    if query:
        suggestions = fetch_autocomplete(query)

    return render(request, 'autocomplete/index.html', {'suggestions': suggestions})

The above view first creates a function to fetch the suggestions from Google and then the results are rendered to the user according to the query set.

Create template

Now let’s create a template to interact with the user. Inside the autocomplete folder create a folder called templates and inside it create a folder called autocomplete and insert a file called index.html.

Now inside the index.html file insert the code below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Autocomplete</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            padding: 20px;
            margin: 0;
        }

        .container {
            max-width: 500px;
            margin: 0 auto;
            background-color: #fff;
            padding: 50px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        h1 {
            text-align: center;
            color: #333;
        }

        form {
            text-align: center;
            margin-bottom: 20px;
        }

        label {
            display: block;
            margin-bottom: 10px;
            color: #333;
        }

        input[type="text"] {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 3px;
            font-size: 16px;
        }

        button[type="submit"] {
            background-color: #007bff;
            color: #fff;
            border: none;
            padding: 10px 30px;
            font-size: 16px;
            border-radius: 3px;
            cursor: pointer;
            margin-top: 10px;
            
        }

        ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        li {
            margin-bottom: 5px;
            color: #333;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Google Autocomplete</h1>
        <form method="get">
            <label for="query">Search Query:</label>
            <input type="text" name="query" id="query" placeholder="Enter your query" autofocus>
            <button type="submit">Search</button>
        </form>
        {% if suggestions %}
            <h2>Suggestions:</h2>
            <ul>
                {% for suggestion in suggestions %}
                    <li>{{ suggestion }}</li>
                {% endfor %}
            </ul>
        {% endif %}
    </div>
</body>
</html>

Create application routes

Now inside the autocomplete folder create a file called urls.py, this will contain the routes of our app as shown below.

from django.urls import path 
from . import views

urlpatterns = [
    path('',views.autocomplete,name="autocomplete"),

]

Create project routes

Now we need to map our application to the project, to do so inside the google_autocomplete folder urls.py file insert the code below.

from django.contrib import admin
from django.urls import path,include 

urlpatterns = [
    path('admin/', admin.site.urls),
    path('',include('autocomplete.urls')),
]