Django Autocomplete Search Input Field with Suggestions: Examples

In modern web applications, providing users with a seamless and efficient search experience is crucial. Autocomplete search with suggestions is a feature that can significantly enhance the user experience, making it easier for users to find what they’re looking for quickly. In this tutorial, we’ll explore how to implement autocomplete search with suggestions in a Django web application.

Django Autocomplete Search Input Field with Suggestions: Examples

Before diving into implementation, lets understand where we can use autocomplete.:

  1. Search Bars: Autocomplete can be used to suggest search queries or products as users type in a search bar.
  2. Address Forms: It can assist users in entering addresses by suggesting city names, postal codes, or street names.
  3. Email Addresses: When users enter recipient email addresses, autocomplete can suggest previously used addresses from their contact list. In registration or login forms, autocomplete can suggest usernames or user IDs that match the characters typed.
  4. Product Selection: In e-commerce applications, it can suggest products based on user input, making it easier to find and select items.
  5. Tags or Categories: When tagging content or selecting categories, autocomplete helps users find relevant options quickly.

Implementing AutoComplete Search Functionality using Django and JQuery

In this example, we’ll create a Django web application named “Products” and implement autocomplete search with suggestions for product names.

Step 1: Setting up the Django Project

Create a new Django project and a Django app:

django-admin startproject myproject
cd myproject
python startapp products

Add the products app to your project’s settings in

    # ...
    # ...

Step 2: Creating a Django Model

In the products app, create a file:

from django.db import models

class Product(models.Model):
    name = models.CharField(max_length=100)

    def __str__(self):

Run migrations to apply the changes:

python makemigrations
python migrate

Note: For demo purpose, we have add products using admin panel by creating superuser login.

Step 3: Implementing Autocomplete Search with Django

In this step, we’ll set up the Django view and URL to handle the autocomplete search. Lets create a product page and ProductAutocomplete which returns JSON response. In your products app, add following code in

from django.http import JsonResponse
from django.views import View
from .models import Product
from django.shortcuts import render

def product_search(request):
    return render(request, 'index.html')

class ProductAutocomplete(View):
    def get(self, request):
        query = request.GET.get('term', '')
        products = Product.objects.filter(name__icontains=query)[:10]
        results = [ for product in products]
        return JsonResponse(results, safe=False)

Define a URL pattern for view in the of the products app: Create in your app

from django.urls import path
from . import views

urlpatterns = [
    path('', views.product_search, name='product-search'),
    path('autocomplete/', views.ProductAutocomplete.as_view(), name='product-autocomplete'),

Add the path of product urls in main which resides in myproject/

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

urlpatterns = [
    path('products/', include('products.urls')),

Step 4: Adding Suggestions to the Autocomplete Search and Enhancing Interface

<script src=""></script>
<link rel="stylesheet" href="">
<script src=""></script>

We will include above jQuery and jQuery UI libraries in your project’s template. In your Django app’s template (e.g., products/templates/index.html), add the following code:

<!DOCTYPE html>
    <title>Product Search</title>
    <!-- Include jQuery and jQuery UI -->
    <script src=""></script>
    <link rel="stylesheet" href="">
    <script src=""></script>
    <h1>Product Search</h1>
        <label for="search">Search for a product:</label>
        <input type="text" id="search" name="search">
        $(function() {
                source: "{% url 'product-autocomplete' %}",
                minLength: 2, // Minimum characters before triggering autocomplete

Step 6: Testing the Autocomplete Search

Start the Django development server:

python runserver

Visit http://localhost:8000/products/ in your web browser. You should see the product search input field. As you type, the autocomplete suggestions should appear below the input.


1Congratulations! You’ve implemented autocomplete search with suggestions for product names in your Django web application. You can customize this example further to fit your specific use case, such as styling the suggestions or connecting them to actual product details.

Find this project on Github.

Blogs You Might Like to Read!