Autocomplete Show Multiple Fields

Create App

python manage.py startapp autocompletemulticolumn

settings.py

    'blog',
    'autocompletemulticolumn',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

urls.py (DjangoProject)

from django.contrib import admin
from django.urls import path,include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('blog.urls')),
    path('autocompletemulticolumn/', include('autocompletemulticolumn.urls')),   
]

models.py

from django.db import models

# Create your models here.
class Autocomplete(models.Model):
    name = models.CharField(max_length=50)
    category = models.CharField(max_length=50)
    description = models.CharField(max_length=200)

urls.py appfolder

from django.urls import path
from . import views

urlpatterns = [
    path('', views.home, name='autohome'),
    path('autocomplete/', views.autocomplete, name='autocomplete'),
    
]

admin.py

from django.contrib import admin
from . models import Autocomplete
# Register your models here.
admin.site.register(Autocomplete)

Add Model Item From Admin Panel

views.py

from django.shortcuts import render
from django.http import JsonResponse
from .models import Autocomplete
# Create your views here.
def home(request):
 return render(request,'autocompletemulticolumn/index.html')

def autocomplete(request):
    term = request.GET.get('term')
    results = []
    if term:
        results = list(Autocomplete.objects.filter(name__icontains=term).values('name', 'category', 'description'))
    return JsonResponse(results, safe=False)

Templates

templates/autocompletemulticolumn/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.1/themes/smoothness/jquery-ui.css">

</head>
<body>
    <form>
        <label for="autocomplete">Search:</label>
        <input type="text" id="autocomplete">
    </form>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

    <script>
        $(document).ready(function() {
            $('#autocomplete').autocomplete({
                source: 'autocomplete',
                minLength: 2,
                select: function(event, ui) {
                    $('#autocomplete').val(ui.item.name);
                    console.log(ui.item);
                    return false;

                },
                focus: function(event, ui) {
                    $('#autocomplete').val(ui.item.name);
                    return false;
                }
            }).autocomplete('instance')._renderItem = function(table, item) {
                return $('<tr>')
                    .append('<td>' + item.name + '</td>')
                    .append('<td>' + item.category + '</td>')
                    .append('<td>' + item.description + '</td>')
                    .appendTo(table);
            };
        });
    </script>
</body>
</html>

PreviousCELERY NextAutocomplete Search

Last updated 2 years ago