Настройка виджета для GroupedModelChoiceField для использования Live Search

Question

Это довольно большой спрос. Я использую GroupedModelChoiceField в моем forms.py. Это обычное настраиваемое поле, которое совпадает с ModelChoiceField, но помещает его в. Требуются две модели, где одна является родительской и используется для креста. Это очень полезно. Полная информация о GroupedModelChoiceField здесь .

Вот как я создаю поле формы: Forms.py:

ledger = GroupedModelChoiceField(required=False, queryset=Ledger.objects.all(), choices_groupby = 'Category', empty_label="Please choose..")

Моя цель состоит в создании виджета выбора Live Search , Я нашел живой поиск на основе Bootstrap, и в настоящее время мне приходится отображать его вручную в моих шаблонах HTML. Он работает нормально, но могу ли я поместить его в пользовательский виджет, чтобы его было легче использовать повторно?

Ниже мой HTML, который должен был бы go в пользовательский виджет. Я потратил некоторое время, пытаясь понять себя, но поле не совсем простое, поэтому оно выходит за рамки моих навыков.

шаблон. html

<select data-width="fit" class="selectpicker form-control ml-1 mb-2 mr-sm-2" data-live-search="true" name="expense" required id="id_expense">
    <option>Please choose...</option>
    {% for category in categories %}
        <optgroup label="{{category.name}}">
            {% for ledger in category.ledger_set.all %}
                <option data-tokens="{{expense.name}}" value="{{ledger.id}}">{{ledger.name}}</option>
            {% endfor %}
        </optgroup>
    {% endfor %}
</select>