[PYTHON] Formulaire suggéré par Django

Cet article utilise CreateView de Django (vue de classe générique) La description sert uniquement à transmettre la valeur de la vue au modèle.

Quelle est la fonction de suggestion?

Lorsque vous saisissez ce que vous souhaitez rechercher sur le site de recherche, le côté du site de recherche Une fonction qui affiche automatiquement les candidats suivants les caractères.

Aperçu de l'application

Implémentation d'une fonction de suggestion dans le formulaire de saisie du nom du client de l'application de gestion des clients. Dans l'image ci-dessous, si vous entrez «da», les noms de clients enregistrés dans la base de données seront répertoriés. C'est une fonction qui s'affiche en bas du formulaire et insère une valeur dans le formulaire lorsque vous sélectionnez le nom correspondant.

Créer un formulaire qui hérite de ModelForm

models.py

from django.db import models
from datetime import datetime


class Client(models.Model):
    class Meta:
        db_table ="client"
        verbose_name ="client"
        verbose_name_plural ="client"

    client_name = models.CharField(verbose_name="Nom du client", max_length=255,unique=True)
    receipt_name = models.CharField(verbose_name="Adresse de réception", max_length=500, blank=True)
    memo = models.TextField(verbose_name="Remarques", max_length=1000, blank=True)

    def __str__(self):
        return '{0}'.format(self.client_name)

forms.py

from django import forms
from .models import Client


class ClientForm(forms.ModelForm):
    class Meta:
        model = Client
        fields = ['client_name', 'receipt_name', 'memo']

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        for field in self.fields.values():
            field.widget.attrs["class"] = "form-control"
            field.widget.attrs['placeholder'] = field.label

Je pense que vous pouvez comprendre le formulaire en regardant le code, donc l'explication est omise.

CreateView (vue de classe générique)

views.py

from django.shortcuts import render
from django.urls import reverse_lazy
from django.views.generic import CreateView
from .forms import ClientForm
from .models import Client

#réduction
class ClientCreateView(CreateView):
    model = Client
    form_class = ClientForm
    success_url = reverse_lazy('client:create_done')

    def get_context_data(self, **kwargs):
        client_name_list = [] #Définir une variable de type liste vide à transmettre au modèle
        context = super().get_context_data(**kwargs)
        client_data = Client.objects.all() #Obtenir toutes les données du modèle client
        for client in client_data: #Extraire les données du modèle client une par une et stocker les valeurs dans la liste
            client_name_list.append(client.client_name)
        context["client_name_list"] = client_name_list
        return context

Utilisez la méthode get_context_data pour créer la valeur à transmettre au modèle dans la fonction.

Créer un modèle

La fonction de suggestion est implémentée à l'aide de JavaScript.

client_form.html

{% extends 'base.html' %}
{% load static %}
{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/client/client_form.css' %}">
{% endblock %}
{% block content %}
<div class="form_contents">
    <h1 class="form_title">Entrez les informations client</h1>
    <form action="" method="POST">
        {{ form.non_field_errors }}
        <div class="field">
            <p>{{ form.client_name.label }}</p>
            {{ form.client_name }}
            <div class="js-suggestions"></div>
            {{ form.client_name.errors }}
        </div>
        <div class="field">
            <p>{{ form.receipt_name.label }}(Tout)</p>
            {{ form.receipt_name }}
            {{ form.receipt_name.errors }}
        </div>
        <div class="field">
            <p>{{ form.memo.label }}(Tout)</p>
            {{ form.memo }}
            {{ form.memo.errors }}
        </div>
        <div class="field submit_btn">
            <button type="submit">Envoyer</button>
        </div>
        {% csrf_token %}
    </form>
</div>
{% endblock %}
{% block script %}
<script>
    const list = [
        {% for name in client_name_list %}
            "{{name}}",
        {% endfor %}
    ];
    const elInput = document.querySelector("#id_client_name");
    const elSuggestions = document.querySelector(".js-suggestions");
    const state = {
        inputValue: elInput.value,
        inputting: false
    };
    const dataMap = new WeakMap();

    function render() {
        renderInput();
        renderSuggestions();
    }

    function renderInput() {
        elInput.value = state.inputValue;
    }

    function renderSuggestions() {
        const elNewList = document.createElement("ul");
        if (state.inputting) {
            list.filter(text => text.includes(state.inputValue)).forEach(text => {
            const elItem = document.createElement("li");
            dataMap.set(elItem, { text });
            elItem.textContent = text;
            elItem.addEventListener("click", handleClickItem);
            elNewList.appendChild(elItem);
            });
        }
        elSuggestions.innerHTML = "";
        elSuggestions.appendChild(elNewList);
    }

    function handleClickItem(e) {
        state.inputValue = dataMap.get(e.currentTarget).text;
        state.inputting = false;

        render();
    }

    elInput.addEventListener("input", () => {
        state.inputValue = elInput.value;
        state.inputting = elInput.value !== "";

        renderSuggestions();
    });
</script>
{% endblock %}

Utilisez l'instruction for pour récupérer la valeur passée dans context dans le<script> </ script> Formez à nouveau la liste en JavaScript. Si la valeur saisie dans le formulaire correspond à la valeur de const list = [], Une spécification qui insère les valeurs correspondantes sous le formulaire. L'explication du code JavaScript est omise. Si vous l'utilisez avec une copie de code, cela fonctionnera comme une fonction de suggestion.