Как заполнить форму автоматически после ввода значения в форму (автозаполнение) 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. За ваше внимание спасибо.