How to Autocomplete Search using Typeahead Js in Django ?

Published On: 12/07/2022 | Category: Django Python

Hi Dev,

Today our leading topic is django typeahead js autocomplete search using Ajax example. I would like to show you python django typeahead js autocomplete search using ajax. let’s discuss about django typeahead js autocomplete example. step by step explain django typeahead js autocomplete example in python. Follow bellow tutorial step of django typeahead js search autocomplete example jquery ajax.

Here i will give you we will help you to give example of python django typeahead js autocomplete search using jquery ajax example. So let's see the bellow example:

Step 1 : Create a Project

In this step, we’ll create a new django project using the django-admin. Head back to your command-line interface and run the following command:

django-admin startproject autocomplete
Step 2 : Create a App
python3 startapp typeahead

Next, you need to add it in the file as follows:

Step 3 : Database Setup

Next step, we will modify the file and update the database settings to configure the mydb database:
    'default': {  
        'ENGINE': 'django.db.backends.mysql',  
        'NAME': 'autocomplete',  
Step 4 : Create a Model

In this step we will require the database model for storing contacts.Open the typeahead/ file and add the following code:

from django.db import models

# Create your models here.

class Language(models.Model):
    title = models.CharField(max_length=255)

After creating these model, you need to create migrations using the following command:

Step 5 : Create a Migrations
python makemigrations

After successfully run the above command go to the typeahead/migrations/

# Generated by Django 4.0.6 on 2022-07-04 11:37

import ckeditor_uploader.fields
from django.db import migrations, models

class Migration(migrations.Migration):

    dependencies = [


    operations = [
                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
                ('title', models.CharField(max_length=255))

Next, you need to migrate your database using the following command:

python migrate
Step 6 : Creating the Views

In this step, we need to create the views for performing fetch record to the database.Open the typeahead/ file and add:

from django.shortcuts import render
from django.http import HttpResponse, JsonResponse
from .models import Language
import json 

# Create your views here.
def search(request):
    return render(request, 'autocomplete.html')

# Typeahead Js Ajax Autocomplete
def autocomplete(request):
    results = []
    if request.method == "GET":
        if request.GET.get('query'):
            value = request.GET['query']
            model_results = Language.objects.all().filter(title__icontains=value)
            for x in model_results:
        data = json.dumps(list(results))
    return HttpResponse(data, content_type='application/json')
Step 7 : Creating Django Templates

Next, open the typeahead/templates/index.html file and the add:

<!DOCTYPE html>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>How to Autocomplete Search using Typeahead Js in Django</title>
    <link rel="stylesheet" href="[email protected]/dist/css/bootstrap.min.css">
    <script src=""></script>
    <script src=""></script>
    <div class="container mt-5 pt-5">
        <div class="row d-flex justify-content-center">
            <div class="col-md-9">
                <div class="card">
                    <div class="card-header">
                        <h5>How to Autocomplete Search using Typeahead Js in Django ? - <span class="text-primary"></span></h5>
                    <div class="card-body">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="sel1">Select Language:</label>
                                    <input class="typeahead form-control" id="search" type="text">
<script type="text/javascript">

$(document).ready(function () {
    var path = "{% url 'autocomplete' %}";

            source: function (query, process) {
                return $.get(path, {
                    query: query
                }, function (data) {
                    return process(data);
Step 8 : Creating Urls

In this section, we’ll create the urls to access our views.Go to the typeahead/ file and update it as follows:

from django.urls import path
from typeahead import views

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

Next, we will require the modify the your root preoject folder lets update the file.

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

urlpatterns = [
    path('', include('typeahead.urls')),
Run the Server

In this step, we’ll run the local development server for playing with our app without deploying it to the web.

python runserver

Next, go to the http://localhost:8000/search address with a web browser.

I Hope It will help you....