Как заполнить форму автоматически после ввода значения в форму (автозаполнение) Django/Ajax/Etc

Я застрял в процессе автозаполнения формы, я просто хочу сделать что-то вроде этого https://miro.medium.com/max/1200/0*muz52MGfi2K93nMt.gif,

Вот класс моделей, который у меня есть :

from django.db import models

class Contact(models.Model):
    name = models.CharField(max_length=100)
    email= models.EmailField()
    message= models.TextField()

def __str__(self):
    return self.name

Тогда у меня есть Views.py Функция следующего вида:

def autofill(request):
    if is_ajax(request=request):
        term = request.GET.get('name')
        contact = Contact.objects.all().filter(name__icontains=term)
        response_content = list(contact.values())
        
        return JsonResponse(response_content, safe=False)
    return render(request, 'form_autofill.html')

def value_autofill(request):
    values = Contact.objects.values('name', 'email', 'message')
    data_dict = {}

    for dict in values:
        data_dict[dict['name']] = dict['email'], dict['message']   
        
    return JsonResponse(data_dict)
<<<Здесь есть две функции autofill и value_autofill. Идея заключается в том, чтобы получить данные из базы данных, а затем преобразовать их в json файл на основе входного значения из шаблона.

здесь код form_autofill.html :

{% block content %}
<body>

<h2>HTML Forms</h2>

<form action="", method="GET">
  {% csrf_token %}
  <label for="name">Name:</label><br>
  <input type="text" id="name" name="name"><br>
  <label for="email">Email:</label><br>
  <input type="text" id="email" name="email" ><br><br>
  <label for="message">Message:</label><br>
  <input type="text" id="message" name="message" ><br><br>
  <input type="submit" value="Submit">
</form> 


<script>
  $(document).ready(function() {
    async function getValues(event, ui) {
      let url = "{% url 'ajax:values' %}";
      let results = await fetch(url);;
      let data = await results.json();
      return data;
    };

    async function AutoCompleteSelectHandler(event, ui){
      let vals= await getValues();

      $('#email').val(vals[ui.item.value]);
    };

    $("#name").autocomplete({
      source: "{% url 'ajax:autofill' %}",
      select: function (event, ui) { 
        AutoCompleteSelectHandler(event, ui)
      },
      minLength: 2,
    });
  });
</script>

Это мой шаблон, и я думаю, что там что-то не так, но я не знаю, что именно

здесь мой url :

from django.urls import path
from .views import *    
app_name = 'ajaxexample'

urlpatterns = [
      path('create/', create_user, name='create'),
      path('autofill/', autofill, name='autofill'),   
      path('values/', value_autofill, name='values'),  
]

Я работал 3 недели только для того, чтобы столкнуться с этой проблемой, я искал везде, но ничего не нашел. Я надеюсь на вашу помощь, ребята, она мне очень нужна. И извините, что я такой начинающий в ajax и django. За ваше внимание спасибо.

Вернуться на верх