Implement tag auto-completion

bookmarks/templates/bookmarks/edit.html

@@ -8,7 +8,7 @@
                 <h2>Edit bookmark</h2>
             </div>
             <form action="{% url 'bookmarks:edit' bookmark_id %}" method="post" class="col-6 col-md-12" novalidate>
-                {% bookmark_form form %}
+                {% bookmark_form form all_tags %}
             </form>
         </section>
     </div>

bookmarks/templates/bookmarks/form.html

@@ -1,4 +1,5 @@
 {% load widget_tweaks %}
+{% load static %}
 
 <div class="bookmarks-form">
     {% csrf_token %}
@@ -13,7 +14,7 @@
         {% endif %}
     </div>
     <div class="form-group">
-        <label for="{{ form.title.id_for_label }}" class="form-label">Tags</label>
+        <label for="{{ form.tag_string.id_for_label }}" class="form-label">Tags</label>
         {{ form.tag_string|add_class:"form-input" }}
         <div class="form-input-hint">
             Enter any number of tags separated by space and <strong>without</strong> the hash (#). If a tag does not
@@ -54,6 +55,26 @@
         <a href="{% url 'bookmarks:index' %}" class="btn">Nevermind</a>
     </div>
 
+    {# Replace tag input with auto-complete component #}
+    <script src="{% static "bundle.js" %}"></script>
+    <script type="application/javascript">
+        const wrapper = document.createElement('div');
+        const tagInput = document.getElementById('{{ form.tag_string.id_for_label }}');
+        const allTagsString = '{{ all_tags }}';
+        const allTags = allTagsString.split(' ');
+
+        new linkding.TagAutoComplete({
+            target: wrapper,
+            props: {
+                id: '{{ form.tag_string.id_for_label }}',
+                name: '{{ form.tag_string.name }}',
+                value: tagInput.value,
+                tags: allTags
+            }
+        });
+
+        tagInput.parentElement.replaceChild(wrapper, tagInput);
+    </script>
     <script type="application/javascript">
         /**
          * Pre-fill title and description placeholders with metadata from website as soon as URL changes

bookmarks/templates/bookmarks/new.html

@@ -8,7 +8,7 @@
                 <h2>New bookmark</h2>
             </div>
             <form action="{% url 'bookmarks:new' %}" method="post" class="col-6 col-md-12" novalidate>
-                {% bookmark_form form auto_close %}
+                {% bookmark_form form all_tags auto_close %}
             </form>
         </section>
     </div>