Autocomplete tags using select2

apps/rp/forms.py

+from django import forms
+
+
+class TagMultipleChoiceField(forms.ModelMultipleChoiceField):
+    def prepare_value(self, value):
+        if hasattr(value, 'tag_id'):
+            return value.tag_id
+        elif hasattr(value, '__iter__') and not isinstance(value, str) and not hasattr(value, '_meta'):
+            return [self.prepare_value(v) for v in value]
+        else:
+            return super(TagMultipleChoiceField, self).prepare_value(value)

apps/rp/templates/rp/article_form.html

@@ -41,4 +41,13 @@
 
 </div>
 </div>
+
+<script type="text/javascript">
+  $('[name=tags]').select2({
+    tags: true,
+    tokenSeparators: [',', ' '],
+    theme: "bootstrap"
+  });
+  $('.select2-container').width("auto");
+</script>
 {% endblock %}

apps/rp/views/articles.py

@@ -6,9 +6,11 @@ from django.urls import reverse, reverse_lazy
 from django import forms
 
 from crispy_forms.helper import FormHelper
-from crispy_forms.layout import Submit, Layout, Field, Div, HTML
+from crispy_forms.layout import Layout, Field, Div, HTML
 from crispy_forms.bootstrap import AppendedText
 
+from taggit.models import Tag
+from rp.forms import TagMultipleChoiceField
 
 from rp.models import Article
 from .votes import UDList
@@ -79,6 +81,10 @@ class ArticleEdit(UpdateView):
         form.helper = FormHelper()
         form.helper.form_tag = False
 
+        # Change the layout of the tags field
+        form.fields["tags"] = TagMultipleChoiceField(
+            queryset=Tag.objects.all())
+
         left_layout = Div(
             Div(
                 Field('title', wrapper_class='col-sm-10'),

package.json

@@ -9,7 +9,8 @@
   "dependencies": {
     "bootstrap": "4.0.0-alpha.6",
     "font-awesome": "^4.7.0",
-    "postcss-font-magician": "^1.6.1"
+    "select2": "^4.0.3",
+    "select2-bootstrap-theme": "^0.1.0-beta.10"
   },
   "devDependencies": {
     "css-loader": "^0.28.0",

static/src/admin.js

@@ -6,6 +6,9 @@ require('bootstrap/dist/js/bootstrap.js');
 require('font-awesome/css/font-awesome.css');
 require('bootstrap/dist/css/bootstrap.css');
 
+require('select2');
+require('select2/dist/css/select2.css');
+require('select2-bootstrap-theme/dist/select2-bootstrap.css');
 
 // Local styles
 import styles from './admin.css';