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'
        ]

score 0 · Answer 1 · answered Mar 16 '22 at 00:04

0

You can use select2.

And add script below to your template.

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

answered Mar 16 '22 at 00:04

Gejun

4,012
4
17
22

lots of thanks. i added the script in my template and also Using Select2 from a CDN but nothing happen. Have I to add a jquery tag from a CDN? – aba2s Mar 16 '22 at 12:30
You don't have to. You can download them and put them in the static folder. Are you able to share your template? I use select2 and it works fine. – Gejun Mar 16 '22 at 14:03
Here his my template. https://jsfiddle.net/aba2s/qcsynt7f/ I put these two CDN in the index.html which is extended by the current temple – aba2s Mar 16 '22 at 15:56
Didn't see anything wrong with your template. Possible solution: check the id for campaign naming tool, it might be different from what I provided. – Gejun Mar 16 '22 at 16:11

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

1 Answers1