在Django表单CharField中有一个自动完成选项列表

isr3a4wc  于 2023-06-25  发布在  Go
关注(0)|答案(1)|浏览(121)

我有一个带有两个CharField的Django表单。我希望用户能够键入,但我希望根据数据库中的值自动完成建议。下面是一个例子,我想从另一个网站拉。

这就是我目前正在做的。

albums = Album.objects.values_list('artist', flat=True).distinct()
artists = Album.objects.values_list('name', flat=True).distinct()

class MakeGuess(forms.Form):
   artist = forms.CharField(max_length=100, label='',
                         widget=forms.TextInput(attrs={'placeholder': 'Artist'}))
   album = forms.CharField(max_length=100, label='',
                        widget=forms.TextInput(attrs={'placeholder': 'Album'}))

我们的目标是让艺术家字段的自动完成下拉列表成为艺术家列表,并且对专辑也是如此。我尝试使用forms.TypedChoice字段和choices=artists,但它没有达到我的预期效果。

6ie5vjzr

6ie5vjzr1#

要根据数据库中的值实现Django表单中艺术家和专辑字段的自动完成建议,您可以使用Select2库沿着Django的ModelChoiceField和ModelMultipleChoiceField。
首先,确保在HTML模板中包含Select2所需的静态文件:

{% load static %}
<link rel="stylesheet" href="{% static 'select2/css/select2.min.css' %}">
<script src="{% static 'select2/js/select2.min.js' %}"></script>

接下来,修改您的表单以将ModelChoiceField用于艺术家和专辑字段:

from django import forms
from .models import Album

class MakeGuess(forms.Form):
    artist = forms.ModelChoiceField(
        queryset=Album.objects.order_by('artist').values_list('artist', flat=True).distinct(),
        label='',
        widget=forms.Select(attrs={'class': 'select2'}),
    )
    album = forms.ModelChoiceField(
        queryset=Album.objects.order_by('name').values_list('name', flat=True).distinct(),
        label='',
        widget=forms.Select(attrs={'class': 'select2'}),
    )

说明:

1.对艺术家和专辑字段使用ModelChoiceField而不是CharField。
2.为每个字段指定查询集,以从数据库中检索不同的值(Album.objects.order_by('artist ')和Album.objects.order_by('name'))。
3.将标签设置为空字符串以删除默认标签。
4.使用字段的Select小部件并添加CSS类select2以启用Select2功能。
最后,为JavaScript中的select输入初始化Select2:

$(document).ready(function() {
    $('.select2').select2();
});

确保在HTML模板中包含了jQuery和select2.min.js文件。
通过这些修改,表单中的艺术家和专辑字段将使用Select2库根据数据库中的值自动完成建议。

相关问题