How to display FilteredSelectMultiple correctly

Question

I use the FilteredSelectMultiple widget, but it just doesn’t want to look like the admin.

Javascript console shows

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

My form (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', ) 

Template

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

(I also tried {{group_perm_form}}, but that didn’t work, much to my surprise, when I displayed the form with a crunchy shape I could filter the input of the selection, however it was still broken)

The order of my javascript files is as follows:

jquery
django.js
form.media

This is the result of 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

admin JS JSI18N script. :

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

. , jquery.init.js static/admin/js, jQuery SelectFilter2 script .