How to properly render FilteredSelectMultiple

Question

I'm using FilteredSelectMultiple widget, but it just doesn't wanna look like the one in the admin.

The Javascript console show

Uncaught TypeError: undefined is not a function        SelectFilter2.js:100

My form (the imported widget: django.contrib.admin.widgets.FilteredSelectMultiple)

 class GroupPermissionForm(forms.ModelForm):                                 
     permissions = forms.ModelMultipleChoiceField(                           
         queryset=Permission.objects.all(),                                  
         widget=FilteredSelectMultiple("verbose name", is_stacked=False)     
     )                                                                       

     class Meta:                                                             
         model = Group                                                       
         fields = ('permissions', ) 

The template

{{ group_perm_form.media }}
<form>
  {{ group_perm_form.permissions }}
</form>

(I've tried {{ group_perm_form }} too but it didn't work, much to my surprise tho when I rendered the form with crispy I could filter the select input, however it was still broken up)

The order of my javascript files are the following:

jquery
django.js
form.media

This is the result btw

edit: the working template looks like this

<script type="text/javascript" src="/static/admin/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/admin/js/jquery.init.js"></script>
{{ group_perm_form.media }}
<form>
  {{ group_perm_form.permissions }}
</form>

<link rel="stylesheet" type="text/css" href="/static/admin/css/widgets.css" />

Answer 1

The admin JS widgets all have a dependency on the JSI18N script. Add this to in your template header:

<script type="text/javascript" src="{% url 'admin:jsi18n' %}"></script>

Edit: Looks like you also need the jquery.init.js from static/admin/js, as jQuery is being namespaced to avoid conflicts and isn't passed to the SelectFilter2 script automatically.