Django form with choices but also with freetext option?

Question

What I'm looking for: A single widget that gives the user a drop down list of choices but then also has a text input box underneath for the user to enter a new value.

The backend model would have a set of default choices (but wouldn't use the choices keyword on the model). I know I can (and I have) implemented this by having the form have both a ChoicesField and CharField and have code use the CharField if ChoicesField is left at the default, but this feels "un-django" like.

Is there a way (either using Django-builtins or a Django plugin) to define something like ChoiceEntryField (modeled after the GtkComboboxEntry which IIRC does this) for a form?

In case anyone finds this, note that there is a similar question on how to best do what I was looking for from a UX perspective at https://ux.stackexchange.com/questions/85980/is-there-a-ux-pattern-for-drop-down-preferred-but-free-text-allowed

Answer 1

I would recommend a custom Widget approach, HTML5 allows you to have a free text input with a dropdown list which would work as a pick-one-or-write-other type of field, this is how I made it:

fields.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') 

views.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     })