improved search filter

cookbook/filters.py

@@ -1,10 +1,20 @@
 import django_filters
 
-from cookbook.models import Recipe
+from cookbook.forms import MultiSelectWidget
+from cookbook.models import Recipe, Keyword
 
 
 class RecipeFilter(django_filters.FilterSet):
     name = django_filters.CharFilter(lookup_expr='contains')
+    keywords = django_filters.ModelMultipleChoiceFilter(queryset=Keyword.objects.all(), widget=MultiSelectWidget, method='filter_keywords')
+
+    @staticmethod
+    def filter_keywords(queryset, name, value):
+        if not name == 'keywords':
+            return queryset
+        for x in value:
+            queryset = queryset.filter(keywords=x)
+        return queryset
 
     class Meta:
         model = Recipe

cookbook/models.py

@@ -40,7 +40,7 @@ class Recipe(models.Model):
 
     @property
     def all_tags(self):
-        return ', '.join([x.name for x in self.keywords.all()])
+        return ', '.join([(x.icon + x.name) for x in self.keywords.all()])
 
 
 class RecipeImport(models.Model):

cookbook/templates/index.html

@@ -1,10 +1,15 @@
 {% extends "base.html" %}
 {% load django_tables2 %}
 {% load crispy_forms_tags %}
+{% load static %}
 {% load i18n %}
 
 {% block title %}{% trans "Cookbook" %}{% endblock %}
 
+{% block extra_head %}
+    {{ filter.form.media }}
+{% endblock %}
+
 {% block content %}
     <div class="row">
         <div class="col md-12">
@@ -14,9 +19,11 @@
                         <i class="fas fa-search"></i> {% trans "Search" %}
                     </div>
                     <div class="card-body">
-                        <form action="" method="get">
+                        <form action="" method="get" id="search_form">
                             {{ filter.form|crispy }}
                             <input class="btn btn-primary" type="submit"/>
+                            <a href="#" onclick="window.location = window.location.pathname;"
+                               class="btn btn-warning">{% trans 'Reset' %}</a>
                         </form>
                     </div>
                 </div>