[PYTHON] Django Vorgeschlagene Form

Dieser Artikel verwendet Djangos CreateView (generische Klassenansicht). Die Beschreibung dient nur zur Übergabe des Werts von der Ansicht an die Vorlage.

Was ist die Vorschlagsfunktion?

Wenn Sie auf der Suchseite auf der Seite der Suchseite eingeben, was Sie suchen möchten Eine Funktion, die Kandidaten nach Zeichen automatisch anzeigt.

App Übersicht

Implementierung einer Vorschlagsfunktion im Eingabeformular für den Kundennamen der Kundenverwaltungsanwendung. Wenn Sie im Bild unten "da" eingeben, werden die in der Datenbank gespeicherten Kundennamen aufgelistet. Diese Funktion wird am unteren Rand des Formulars angezeigt und fügt einen Wert in das Formular ein, wenn Sie den entsprechenden Namen auswählen.

Erstellen eines Formulars, das ModelForm erbt

models.py

from django.db import models
from datetime import datetime


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

    client_name = models.CharField(verbose_name="Kundenname", max_length=255,unique=True)
    receipt_name = models.CharField(verbose_name="Empfangsadresse", max_length=500, blank=True)
    memo = models.TextField(verbose_name="Bemerkungen", 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

Ich denke, Sie können das Formular verstehen, indem Sie sich den Code ansehen, daher wird die Erklärung weggelassen.

CreateView (generische Klassenansicht)

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

#Kürzung
class ClientCreateView(CreateView):
    model = Client
    form_class = ClientForm
    success_url = reverse_lazy('client:create_done')

    def get_context_data(self, **kwargs):
        client_name_list = [] #Definieren Sie eine leere Listentypvariable, die an die Vorlage übergeben werden soll
        context = super().get_context_data(**kwargs)
        client_data = Client.objects.all() #Holen Sie sich alle Client-Modelldaten
        for client in client_data: #Extrahieren Sie die Clientmodelldaten nacheinander und speichern Sie die Werte in der Liste
            client_name_list.append(client.client_name)
        context["client_name_list"] = client_name_list
        return context

Verwenden Sie die Methode "get_context_data", um den Wert zu erstellen, der in der Funktion an die Vorlage übergeben werden soll.

Vorlage erstellen

Die Vorschlagsfunktion wird mit JavaScript implementiert.

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">Geben Sie Kundeninformationen ein</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 }}(Irgendein)</p>
            {{ form.receipt_name }}
            {{ form.receipt_name.errors }}
        </div>
        <div class="field">
            <p>{{ form.memo.label }}(Irgendein)</p>
            {{ form.memo }}
            {{ form.memo.errors }}
        </div>
        <div class="field submit_btn">
            <button type="submit">Senden</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 %}

Verwenden Sie die for-Anweisung, um den in context im<script> </ script>übergebenen Wert abzurufen Bilden Sie die Liste erneut in JavaScript. Wenn der im Formular eingegebene Wert mit dem Wert in const list = [] übereinstimmt, Eine Spezifikation, die übereinstimmende Werte unterhalb des Formulars einfügt. Die Erklärung des JavaScript-Codes wird weggelassen. Wenn Sie es mit einer Codekopie verwenden, funktioniert es als Vorschlagsfunktion.