Django with Autocomplete JQueryUI

Adi Ramadhan
2 min readMay 24, 2022

--

Django form field with autocomplete jquery. Data is stored in model django and autocomplete by 3 letters typed by user.
Autocomplete JQueryUI official docs here.

Autcomplete field based on data in movie model

Step 1: Preparation, Create Django Project, Initial Migration
create virtualenv: virtualenv venv
start virtualenv: venv/Scripts/activate
install Django in virtualenv: pip install django==3.2
Create Django: django-admin startproject myproject
Go to myproject folder: cd myproject
Initial Migration: python manage.py migrate

Step 2: Create Django Apps
Create apps: python manage.py startapp myapp
Add myapp to INSTALLED_APPS in myproject/settings.py

INSTALLED_APPS in myproject/settings.py

Step 3: Add Model

myapp/models.py

Step 4: Register Model in Django Admin

myapp/admin.py

Step 5: Makemigrations and Migrate
Make migrations: python manage.py makemigrations
Migrate: python manage.py migrate

Step 6: Create Superuser
Create superuser: python manage.py createsuperuser
Type username, email password and retype password

Step 7: Run Server and Add Some Data
Run Server: python manage.py runserver
Access: http://127.0.0.1:8000/admin
Login with superuser and add some data

admin site, add some data

Step 8: Set up Templates Folder
Create folder templates in myapp

Add template directory in TEMPLATES parameter in myproject/settings.py

Step 9: Create HTML Files in myapp/templates Folder

myapp/templates/search.html

Step 10: Create Function Based View in myapp/views.py
Update myapp/views.py.

myapp/views.py

Step 11: Setup URLs in myapp and myproject Folder

Create myapp/urls.py

Update myproject/urls.py

Step 12: Run Server and Test
Run Server: python manage.py runserver
Access: http://127.0.0.1:8000

Autcomplete field based on data in movie model

--

--