# Autocomplete Show Multiple Fields

### Create App&#x20;

```bash
python manage.py startapp autocompletemulticolumn
```

### settings.py

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

### urls.py (DjangoProject)

```python
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

```python
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

```python
from django.urls import path
from . import views

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

###

### admin.py

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

### Add Model Item From Admin Panel

<figure><img src="https://664948176-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdX27l90MHtjXhtBupXys%2Fuploads%2FRHQ3H8j0dqWUCp64AIWY%2FScreenshot_2.png?alt=media&#x26;token=c76f8258-f830-4781-bad7-7c87327ebd56" alt=""><figcaption></figcaption></figure>

### views.py

```python
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**

```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>
```

<figure><img src="https://664948176-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdX27l90MHtjXhtBupXys%2Fuploads%2F6cLs0U4uzaOX5VAkJlIf%2FScreenshot_1.png?alt=media&#x26;token=b67abcf7-e180-44af-967f-8acc76250e1d" alt=""><figcaption></figcaption></figure>
