How to implement an autocomplete-datalist form field inside a CreateView in Django? - django-views

Question

I am very new to web development and specifically using Django Framework.
I am trying to find a clean, efficient and non external package dependant implementation for an autocomplete-datalist form field inside a Generic class based CreateView template in Django.
I have found numerous resources on various implementations, but most of them depend on external packages(autocomplete-light, jqueryCDN, etc.) and none of it is based on a class based generic CreateView.
I have been experimenting and I have managed to make the autocomplete-datalist work in a way but I am stuck in a very simple problem when I try to post my form with the data from the datalist element.
I get a validation error:
"city_name: This field is required"
I also noticed that the city object queried from the database inside the datalist has also the id of the city_name
models.py
from django.db import models
class City(models.Model):
name = models.CharField(max_length=50)
class Meta:
verbose_name_plural = "cities"
ordering = ['name']
def __str__(self):
return self.name
class Person(models.Model):
first_name = models.CharField(max_length=40)
last_name = models.CharField(max_length=40)
address = models.CharField(max_length=150)
city_name = models.ForeignKey(City, on_delete=models.CASCADE)
def __str__(self):
return f'{self.first_name} {self.last_name}'
views.py
from django.views.generic import ListView, CreateView
from django.contrib.messages.views import SuccessMessageMixin
from django.contrib.auth.mixins import LoginRequiredMixin
from .models import Person, City
from .forms import PersonForm
# Create your views here.
class PersonList(LoginRequiredMixin, ListView):
model = Person
template_name = "home.html"
paginate_by = 20
login_url = "/login/"
redirect_field_name = 'redirect_to'
def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)
return context
class PersonCreate(LoginRequiredMixin, SuccessMessageMixin, CreateView):
model = Person
template_name = "testform.html"
login_url = "/login/"
form_class = PersonForm
success_url = 'testapp/add/'
success_message = 'Person registered successfully!'
redirect_field_name = 'redirect_to'
forms.py
from django import forms
from .models import Person, City
class PersonForm(forms.ModelForm):
class Meta:
model = Person
fields = ["first_name", "last_name", "address", "city_name"]
testform.html
{% extends 'home.html' %}
{% load static %}
{% block content %}
{% if messages %}
{% for message in messages %}
<div class="alert alert-success alert-dismissible fade show" role="alert">
<span style="font-size: 18px;padding: 1mm"><i class="fa-solid fa-circle-check"></i></span>{{ message }}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% endfor %}
{% endif %}
<form method="POST">
{% csrf_token %}
<div class="mb-3">
<label for="first_name charfield" class="form-label"> First Name</label>
{{form.first_name}}
</div>
<div class="mb-3">
<label for="last_name charfield" class="form-label">Last Name</label>
{{form.last_name}}
</div>
<div class="mb-3">
<label for="address charfield" class="form-label">Address</label>
{{form.address}}
</div>
<div class="mb-3">
<label for="city_name datalist" class="form-label">City Name</label>
<input type="text" list="cities" class="form-control">
<datalist id="cities">
{% for city in form.city_name %}
<option>{{ city }}</option>
{% endfor %}
</datalist>
</div>
<button class="btn btn-outline-primary" type="submit">Submit</button>
</form>
{{form.errors}}
{% endblock %}
Result:
I believe it is a necessary feature for all modern web applications to have this kind of functionality within their database query-autocomplete form fields system. It is a pity that although Django provides this feature for the AdminModels through its autocomplete_fields attribute, it makes it so hard to implement on Generic Class Based Views on the actual application models.
How can I approach this issue, and is there a efficient and more optimized way to implement it?

Answer 1

If you don't want a field required you can set the attribute blank=True in the model class. A question I have is why would you want to have a Foreignkey to just a city name. Or are you trying to use the a list of cities to populate the drop down? In that case the Foreign Key is definitely not the answer.