Django动态表单

我正在制作Django Web应用程序，我不知道如何解决这个问题。我将非常感谢您的帮助。我有我的forms.py

CHOICES =(
    ("1", "sys_1"),
    ("2", "sys_2"),
    ("3", "sys_3"),
    ("4", "sys_4"),
)
#and so on, lots of elements

Class ExampleForm(forms.Form):
  text = forms.CharField()
  list = forms.MultipleChoiceField(choices=CHOICES,widget=forms.CheckboxSelectMultiple)

我想实现的是，如果用户在文本charfield中写了一些东西，列表应该根据输入的内容动态地改变选择的内容。此外，列表必须记住标记的复选框。示例（步骤列表）：

1. user inputs something in the char field
2. the list is changing
3. user marks some checkboxes
4. user deletes content in the char field 
5. the list is changing and displaying all elements but remember marked 
  checkboxes

你可以使用forms.MultipleChoiceField()来获取数据库的对象，然后在index.html中使用一个特殊的键来服务它们，然后通过javascript过滤选项，如下所示：
首先为作者创建模型。

型号.py

from django.db import models

class Author(models.Model):
    name = models.CharField(max_length=100)
    date = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        return self.name

用数据库查询指定选择形式和选项。

表单.py

from django import forms
from . import models

CHOICES =[]

def choice():
    key = 0
    query = models.Author.objects.all()
    for obj in query:
        CHOICES.append((key, obj))
        key += 1
    return CHOICES

class ExampleForm(forms.Form):
    author = forms.MultipleChoiceField(choices=choice(),
                                       initial='',
                                       required=False,
                                       widget=forms.Select(attrs={'id': 'selection'}))

将您的表单发送到index.html文件。

查看次数.py

from django.shortcuts import render
from . import forms

def home(request):
    form = forms.ExampleForm
    return render(request, 'base.html', {'form': form})

最后，在index.html中使用{{ form }}，并指定oninput事件，以按输入框中的每个新字母进行搜索。在脚本标记中定义一个函数，并使用includes()方法逐个搜索选择选项。

索引.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://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    
    <style>

    </style>

    </head>

    <body>

          <input type="text" oninput="myFunction(this.value)">

          {{form}}
          
    
    <script>

        function myFunction(value) {
            var x = document.getElementById("selection");
            for (i = 0; i < x.length; i++) {
                text = x.options[i].text;
                if (text.includes(value) === false) {
                    x.remove(i);
                }
            }
            
          }

    </script>
    
    </body>
    </html>

另外我在selectionObj.remove(indexNumber)结构中使用了remove()方法来删除每个选项。

Django动态表单

1条答案

相关问题

热门标签

最新问答