django auto complete light styling

Step 1: Install django-autocomplete-light package by running the following command in your terminal:

pip install django-autocomplete-light

Step 2: Add 'dal' and 'dal_select2' to your Django project's INSTALLED_APPS in the settings.py file:

INSTALLED_APPS = (
    ...
    'dal',
    'dal_select2',
    ...
)

Step 3: Include the following code in your project's urls.py file to configure the autocomplete URL:

from dal import autocomplete

urlpatterns = [
    ...
    url(
        r'^autocomplete/$',
        autocomplete.Select2QuerySetView.as_view(),
        name='autocomplete',
    ),
    ...
]

Step 4: Create a model for which you want to enable autocomplete. For example, if you have a model named Product, you can define an autocomplete class in your models.py file:

from django.db import models
from dal import autocomplete

class Product(models.Model):
    name = models.CharField(max_length=255)

class ProductAutocomplete(autocomplete.Select2QuerySetView):
    def get_queryset(self):
        qs = Product.objects.all()

        if self.q:
            qs = qs.filter(name__istartswith=self.q)

        return qs

Step 5: In your form, use the ModelSelect2 widget from dal_select2 package to enable autocomplete for the field you want. For example, if you have a form named ProductForm, you can use the widget as follows:

from dal import autocomplete
from django import forms
from .models import Product

class ProductForm(forms.ModelForm):
    name = forms.ModelChoiceField(
        queryset=Product.objects.all(),
        widget=autocomplete.ModelSelect2(url='autocomplete')
    )

    class Meta:
        model = Product
        fields = '__all__'

That's it! Now, when you render the form, the specified field will have autocomplete functionality enabled.