How to add a searchable text field to select an item in drop down list?

Question

I have a filter form as you can see https://jsfiddle.net/aba2s/qcsynt7f/6/. I would like to add a searchable field(in the red area) so users can filter the campaign naming tool object instead of scrolling. Any help is appreciated.

My filter class

class UserInsertionOrderFilter(django_filters.FilterSet):
    start_date = django_filters.DateFilter(widget=DateInput)
    end_date = django_filters.DateFilter(widget=DateInput)

    class Meta:
        model = UserInsertionOrder
        fields = [
            'campaign_naming_tool',
            'start_date',
            'end_date'
        ]

Answer 1

You can use select2.

And add script below to your template.

<script>
    $(document).ready(function() {
        $("#id_campaign_naming_tool").select2();
    })
</script>