Django 表单有 Select 但也有自由文本选项

发布于09月26日

What I'm looking for:单个小部件，它为用户提供一个 Select 下拉列表，然后在下面还有一个文本输入框，供用户输入新值.

后端模型将有一组默认选项(但不会在模型上使用CHOICES关键字).我知道我可以(并且我已经)通过让窗体同时具有ChoicesField和Charfield来实现这一点，并且如果ChoicesField保留为默认值，则让代码使用Charfield，但是这感觉像是"Un-Django".

有没有办法(使用Django内置或Django插件)为表单定义类似ChoiceEntryField的东西(仿照IIRC执行此操作的GtkComboxEntry)？

如果有人发现了这一点，请注意，还有一个类似的问题，关于如何最好地做我在https://ux.stackexchange.com/questions/85980/is-there-a-ux-pattern-for-drop-down-preferred-but-free-text-allowed的用户体验中寻找的东西

推荐答案

我推荐一种自定义的Widget方法，HTML5允许您使用带有下拉列表的自由文本输入，该下拉列表将用作 Select 一个或写入其他类型的字段，我是这样做的:

领域.py

from django import forms

class ListTextWidget(forms.TextInput):
    def __init__(self, data_list, name, *args, **kwargs):
        super(ListTextWidget, self).__init__(*args, **kwargs)
        self._name = name
        self._list = data_list
        self.attrs.update({'list':'list__%s' % self._name})

    def render(self, name, value, attrs=None, renderer=None):
        text_html = super(ListTextWidget, self).render(name, value, attrs=attrs)
        data_list = '<datalist id="list__%s">' % self._name
        for item in self._list:
            data_list += '<option value="%s">' % item
        data_list += '</datalist>'

        return (text_html + data_list)

forms.py

from django import forms
from myapp.fields import ListTextWidget

class FormForm(forms.Form):
   char_field_with_list = forms.CharField(required=True)

   def __init__(self, *args, **kwargs):
      _country_list = kwargs.pop('data_list', None)
      super(FormForm, self).__init__(*args, **kwargs)

    # the "name" parameter will allow you to use the same widget more than once in the same
    # form, not setting this parameter differently will cuse all inputs display the
    # same list.
       self.fields['char_field_with_list'].widget = ListTextWidget(data_list=_country_list, name='country-list')

意见.py

from myapp.forms import FormForm

def country_form(request):
    # instead of hardcoding a list you could make a query of a model, as long as
    # it has a __str__() method you should be able to display it.
    country_list = ('Mexico', 'USA', 'China', 'France')
    form = FormForm(data_list=country_list)

    return render(request, 'my_app/country-form.html', {
        'form': form
    })