Django: extra_viewsのInlineFormSetFactoryにてdatalistをサブフォーム側で表示

前回はInlineFormSetFactoryにてサブフォーム側にchoicesをつかって、静的に入力補助できるようにしたのですが、さらに動的に入力補助できないものかと思い、datalistを使えないかとやってみたところ動いたので、備忘録として挙げてみることにしました。

なお、html5のdatalist自体の説明は割愛します。
まず、サブフォーム側です。以下のようにしました。

class art_imageForm(InlineFormSetFactory):
    model = art_image
    fields = ['art_image_title', 'original_img', ]

    factory_kwargs = {
        'widgets' : {\
            'art_image_title':\
                forms.TextInput(
                    attrs={'list': 'art_image_titles', 'placeholder': 'enter image title'},
                ),
        },
    }

ここでは、datalistをid="art_image_titles"のものから参照するということと、placeholderをここで指定しています。つづいて、テンプレート側です。フィールドを表示する部分だけですが、以下のようにしました。

        {% for form in formset %}
            {% for field in form %}
                <tr>
                    <th class="bg-light">
                        {% if field.field.widget.is_hidden %}
                        {% else %}
                        {{ field.label_tag }}
                        {% endif %}
                    </th>
                    <td>{{ field }}</td>
                <tr>
            {% endfor %}
            <datalist id="art_image_titles">
                {% for title in art_image_titles %}
                <option value="{{ title }}">
                {% endfor %}
            </datalist>
        {% endfor %}

datalist id="art_image_titles"の部分が、選択候補を設定する部分です。
最後に、contexとしてart_image_titlesを親フォーム側で用意します。(サブフォーム側ではget_context_dataが実行されなかったので、止むを得ず親側でart_list_titlesのcontextを用意しました。)

class artCreateView(CreateWithInlinesView):
...
    def get_context_data(self, **kwargs):
        context = super(artCreateView, self).get_context_data(**kwargs)
        context['art_image_titles'] = art_image.objects.distinct().values_list('art_image_title', flat=True)
        
        return context

これで、htmlはおよそ以下のようにレンダリングされます。

    <table id="formset2" class="table table-sm ">
        <tr>
            <th class="bg-light">
                <label for="id_art_image_set-0-art_image_title">Art image title:</label>                        
            </th>
            <td><input type="text" name="art_image_set-0-art_image_title" list="art_image_titles" placeholder="enter image title" maxlength="128" id="id_art_image_set-0-art_image_title">
            </td>
        <tr>
        <datalist id="art_image_titles">
            <option value="top">
            <option value="rear">
        </datalist>
    </table>

extra_viewsのInlineFormSetFactoryにてdatalistを使う記事が見当たらなかったのですが、何かの役に立てば幸いです。
今回は以上です。それでは。