gawa/blog/templates/blog/browse.html

@@ -91,7 +91,17 @@
                         <script>
                             var input = document.querySelector('input[class=tagify]');
                             new Tagify(input, {
-                                originalInputValueFormat: valuesArr => valuesArr.map(item => item.value).join(',')
+                                originalInputValueFormat: valuesArr => valuesArr.map(item => item.value).join(','),
+                                enforceWhitelist: true,
+                                whitelist : [{% for keyword in keywords %}'{{ keyword.slug | safe }}', {% endfor %}],
+                                dropdown : {
+                                    classname     : "tagify-dropdown", // TODO: style better
+                                    enabled       : 1,              // show the dropdown immediately on focus
+                                    maxItems      : 5,
+                                    position      : "text",         // place the dropdown near the typed text
+                                    closeOnSelect : false,          // keep the dropdown open after selecting a suggestion
+                                    highlightFirst: true
+                                }
                             })
                         </script>
                     </form>
@@ -105,7 +115,7 @@
                         <div class="text-center">
                             <img src="/media/img/http/404.svg"
                                  class="img-fluid pb-5 pt-2 darkmode-invert"
-                                 style="max-height: 650px;"
+                                 style="max-height: 650px"
                                  alt="404" />
                             <h2 class="display-5">{% trans "No posts found for your filters." %}</h2>
                         </div>

gawa/blog/views.py

@@ -104,6 +104,7 @@ class Browse(ListView):
         context = super().get_context_data(**kwargs)
         context['featured_posts'] = BlogPost.objects.filter(featured=True)
         context['categories'] = Category.objects.all()
+        context['keywords'] = Keyword.objects.all()
 
         context["filters"] = {}
         if "category" in self.request.GET and len(