How to Create Search Autocomplete Input Field in Django?
Hi Dev,
Today our leading topic is django search autocomplete input field example. you'll learn django search autocomplete. it's simple example of django search autocomplete example example. we will help you to give example of django search autocomplete example in python.
Here i will give you we will help you to give example of django search autocomplete input field 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 exampleStep 2 : Create a App
cd example django-admin startapp core
Step 3 : Update settings.py
Next, you need to add it in the settings.py file as follows:
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'core',
]
Step 4 : Create a Model
In this step we will require the database model for storing contacts.Open the core/models.py file and add the following code:
core/models.py
from django.db import models
# Create your models here.
class Language(models.Model):
name = models.CharField(max_length=255)
created_at = models.DateTimeField( auto_now_add = True)
core/admin.py
So, my django admin page look like this:
After creating these model, you need to create migrations using the following command:
Next, you need to migrate your database using the following command:
python manage.py makemigrations python manage.py migrate
Step 5 : Creating the Views
In this step, we need to create the views for performing fetch record to the database.Open the core/views.py file and add:
core/views.py
from django.shortcuts import render
from .models import Language
# Create your views here.
def index(request):
languages=Language.objects.all()
return render(request,'index.html',{'languages':languages})
Step 6 : Creating Templates
Next, open the core/templates/index.html file and the add:
/core/templates/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Django select2 Example Tutorial</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css" rel="stylesheet"
type="text/css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<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>
<style type="text/css">
body{
background-color: #f7fcff;
}
</style>
</head>
<body>
<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 Create Search Autocomplete Input Field in Django - <span class="text-primary">Tuts-Station.com</span></h5>
</div>
<div class="card-body">
<div class="col-md-12">
<div class="form-group">
<label for="sel1">Select Language:</label>
<input type="text" class="form-control" id="tags">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
$(function () {
var availableTags = [
{% for language in languages %}
"{{language.name}}",
{% endfor %}
];
$("#tags").autocomplete({
source: availableTags
});
});
</script>
</html>
Step 7 : Creating Urls
In this section, we’ll create the urls to access our views.Go to the urls.py core/urls.py file and update it as follows:
core/urls.py
from django.urls import path
from core import views
urlpatterns = [
path('search/', views.index),
]
Next, we will require the modify the urls.py your root preoject folder lets update the file.
example/urls.py
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('core.urls')),
]
Step 8 : 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 manage.py runserver
Next, go to the http://localhost:8000/search address with a web browser.
I Hope It will help you....