Make the epic's dropdown searchable

main/forms.py

@@ -45,7 +45,8 @@ class EpicForm(forms.ModelForm):
 class StoryForm(forms.ModelForm):
     
     description = MartorFormField(label="Description")
-    epic = ChoiceField(choices=[(epic.id, epic.name) for epic in Epic.objects.filter(closed=False).order_by('-value')])
+    epic = ChoiceField(choices=[(epic.id, epic.name) for epic in Epic.objects.filter(closed=False).order_by('-value')],
+                       widget=forms.Select(attrs={'class':'filtered-dropdown'}))
     assignees = MultipleChoiceField(choices=[(user.id, user.get_full_name() or user.username) for user in User.objects.all()])
     
     class Meta:

main/static/js/custom.js

@@ -335,4 +335,7 @@ $(document).ready( function () {
 			return true;
 		}
 	});
+	
+	$('.filtered-dropdown').select2();
+	
 });

main/templates/_layout.html

@@ -20,6 +20,8 @@
 		<link href="{% static 'plugins/css/resizable.min.css' %}" type="text/css" media="all" rel="stylesheet" />
 		<link href="{% static 'martor/css/martor.min.css' %}" type="text/css" media="all" rel="stylesheet" />
 
+		<link rel="stylesheet" type="text/css" href="{% static 'css/select2.min.css' %}">
+
 		<link rel="stylesheet" type="text/css" href="{% static 'css/custom.css' %}"/>
 
 		<script src="{% static 'js/jquery.min.js' %}"></script>
@@ -43,6 +45,8 @@
 		<script type="text/javascript" src="{% static 'plugins/js/emojis.min.js' %}"></script>
 		<script type="text/javascript" src="{% static 'martor/js/martor.min.js' %}"></script>
 		<script type="text/javascript" src="{% static 'js/Chart.bundle.js' %}"></script>
+		
+		<script type="text/javascript" src="{% static 'js/select2.min.js' %}"></script>
 		<script type="text/javascript" src="{% static 'js/common.js' %}"></script>
 		<script type="text/javascript" src="{% static 'js/custom.js' %}"></script>