Implement Search Autocomplete For Input Fields in Django Last Updated : 16 Feb, 2021 Comments Improve Suggest changes Like Article Like Report Django is a high-level Python based Web Framework that allows rapid development and clean, pragmatic design. It is also called batteries included framework because Django provides built-in features for everything including Django Admin Interface, default database – SQLlite3, etc. Today we will create joke app in django. In this article we will learn how to fetch data from django models and give it feature like autocomplete. We will be using jquery for autocompletion. Installation : Ubuntu pip3 install django First we will create new project django-admin startproject AutoCcd AutoC Then we will create new app python3 manage.py startapp main Then add the app name in settings.py inside the INSTALLED_APPS models.py Python3 from django.db import models # Create your models here. class Language(models.Model): name = models.CharField(max_length=20) def __str__(self): return f"{self.name}" Then to create database table we have to makemigrations python3 manage.py makemigrationspython3 manage.py migrate I have added this languages in the table. Python3 from django.shortcuts import render from .models import Language # Create your views here. def home(request): languages = Language.objects.all() return render(request,'main/index.html',{"languages":languages}) Then create new directory inside app template inside that create another directory main Then create new file index.html HTML <!DOCTYPE html> <html> <head> <title>AutoComplete</title> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"> </script> <script src= "https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"> </script> <link href= "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" /> </head> <body> <h1>Welcome to GFG</h1> <input type="text" id="tags"> <script> $( function() { var availableTags = [ {% for language in languages %} "{{language.name}}", {% endfor %} ]; $( "#tags" ).autocomplete({ source: availableTags }); } ); </script> </body> </html> Then create new file urls.py Python3 from django.urls import path from .views import * urlpatterns = [ path('', home,name="home") ] Then add the app/urls inside our project/urls AutoC/urls.py Python3 from django.contrib import admin from django.urls import path,include urlpatterns = [ path('admin/', admin.site.urls), path('',include("main.urls")) ] Then to run this app Windows python manage.py runserver Ubuntu python3 manage.py runserver Comment More infoAdvertise with us Next Article Implement Search Autocomplete For Input Fields in Django V vivekpisal12345 Follow Improve Article Tags : Python Web Technologies Python Django Python Framework Practice Tags : python Similar Reads How To Implement ChatGPT In Django Integrating ChatGPT into a Django application allows you to create dynamic and interactive chat interfaces. By following the steps outlined in this article, you can implement ChatGPT in your Django project and provide users with engaging conversational experiences. Experiment with different prompts, 4 min read How to disable autocomplete of an HTML input field ? In this article, we will learn how to disable or off autocomplete features of a particular input field in HTML form. As we know the autocomplete feature is used to allow a browser to automatically complete the input data value based on the values that the user entered before. The latest browsers sup 1 min read How to Add HTML Attributes to Input Fields in Django Forms? Django provides an easy-to-use system for creating and managing forms through its forms.Form and forms.ModelForm classes. These classes allow us to create form fields that map directly to HTML input fields, such as <input>, <textarea>, <select>, etc. By default, these fields come w 3 min read jQuery UI Autocomplete search() Method jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and jQuery. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Autocomplete widget is used to perform autocomplete enables to quickly find and select from a pre-populated list of val 2 min read Django Form | Build in Fields Argument We utilize Django Forms to collect user data to put in a database. For various purposes, Django provides a range of model field forms with various field patterns. The most important characteristic of Django forms is their ability to handle the foundations of form construction in only a few lines of 3 min read Django form field custom widgets A widget is Djangoâs representation of an HTML input element. The widget handles the rendering of the HTML, and the extraction of data from a GET/POST dictionary that corresponds to the widget. Whenever you specify a field on a form, Django will use a default widget that is appropriate to the type o 3 min read How to disable browser Autocomplete on web form field/input tag? Input text autocomplete is the default feature of any browser. While working with the form or input fields in HTML web page autocomplete feature of the browsers come in the picture. By default autocomplete is enabled in browsers so when submitting the form it remembers the information. So when again 2 min read jQuery UI Autocomplete search Event jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and jQuery. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Autocomplete widget is used to perform autocomplete enables to quickly find and select from a pre-populated list of val 2 min read jQuery UI Autocomplete change Event jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and jQuery. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Autocomplete widget is used to perform autocomplete enables to quickly find and select from a pre-populated list of val 2 min read script.aculo.us Autocompleter.Local choices Option The script.aculo.us library is a cross-browser library that aims at improving the user interface of a website. The Autocompleter can be used for providing auto-completion support for text fields in the webpage. The local Autocompleter is used when auto-completion options are given as an array to the 2 min read Like