Added Tag completion in add posts

Please redo the requirements installs!

fet2020/fet2020/settings.py

@@ -43,7 +43,8 @@ INSTALLED_APPS = [
     'ckeditor',
     'ckeditor_uploader',
     'rest_framework',
-    'django_filters'
+    'django_filters',
+    'django_static_jquery_ui',
 ]
 
 MIDDLEWARE = [

fet2020/posts/admin.py

@@ -11,4 +11,16 @@ class MyPostAdmin(admin.ModelAdmin):
     def save_model(self, request, obj, form, change):
         obj.author = request.user
         super().save_model(request, obj, form, change)
+
+    class Media:
+        css = {
+            "all": [
+                "jquery-ui/jquery-ui.min.css",
+                "jquery-ui/ui-lightness/theme.css",
+            ]
+        }
+        js = [
+            "jquery-ui/jquery-ui.min.js",
+        ]
+
 admin.site.register(Post,MyPostAdmin)

fet2020/posts/forms.py

@@ -12,5 +12,6 @@ class MyPostForm(forms.ModelForm):
 
     class Media:
         js = (
-            'js/auto_slug.js',   # inside app static folder
+            'js/auto_slug.js',   # automatic slag completion ajax
+            'js/tag_completion.js',
         )

fet2020/posts/static/js/tag_completion.js

@@ -0,0 +1,59 @@
+window.addEventListener("load", function() {
+(function($) {
+
+    function split( val ) {
+        return val.split( /,\s*/ );
+    }
+    
+    function extractLast( term ) {
+        return split( term ).pop();
+    }
+    
+    getUrl = window.location;
+    baseUrl = getUrl.protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[0];
+    remoteUrl = baseUrl + 'posts/func/tag_complete';
+
+    $( "input#id_tags" )
+        // don't navigate away from the field on tab when selecting an item
+        .on( "keydown", function( event ) {
+            if ( event.keyCode === $.ui.keyCode.TAB &&
+              $( this ).autocomplete( "instance" ).menu.active ) {
+                event.preventDefault();
+            }
+         })
+         .autocomplete({
+
+             source: function( request, response ) {
+                 $.getJSON( remoteUrl, {
+                   term: extractLast( request.term )
+                 }, response );
+             },
+        
+	     search: function() {
+                 // custom minLength
+                 var term = extractLast( this.value );
+                 if ( term.length < 2 ) {
+                    return false;
+                 }
+             },
+        
+             focus: function() {
+                 // prevent value inserted on focus
+                 return false;
+             },
+
+             select: function( event, ui ) {
+                 var terms = split( this.value );
+                 // remove the current input
+                 terms.pop();
+                 // add the selected item
+                 terms.push( ui.item.value );
+                 // add placeholder to get the comma-and-space at the end
+                 terms.push( "" );
+                 this.value = terms.join( ", " );
+                 return false;
+             }
+     });
+
+})(django.jQuery);
+});

fet2020/posts/urls.py

@@ -1,6 +1,7 @@
 from django.urls import path
 from . import views
 urlpatterns=[
+    path('func/tag_complete', views.tag_complete),
     path('func/slug_calc', views.slug_calc),
     path('t/<str:tag>',views.tags,name='posts.tags'),
     path('',views.index,name='posts.index'),

fet2020/posts/views.py

@@ -12,6 +12,7 @@ from django.core.cache import cache
 
 from django.utils.text import slugify
 from django.utils import timezone
+from django.http import JsonResponse
 
 def get_next_dict():
     posts=Post.news_objects.order_by('-public_date').values('slug')
@@ -60,6 +61,23 @@ def slug_calc(request):
 
     return HttpResponseServerError("Requires a title field.")
 
+# Ajax function that returns autocomplete suggestions for a given tag input
+def tag_complete(request):
+
+    if request.method == "GET":
+        get = request.GET.copy()
+        term = get['term']
+
+        tag_objects = Tag.objects.filter(name__istartswith=term)
+
+        tag_array =[]
+        for elem in tag_objects:
+            tag_array.append(elem.name)
+
+        return JsonResponse(tag_array, safe=False)
+        
+    return HttpResponseServerError("Requires a term field.")
+
 class PostViewSet(viewsets.ModelViewSet):
     """
     API endpoint that allows users to be viewed or edited.

fet2020/requirements.txt

@@ -3,3 +3,4 @@ django-taggit
 django-ckeditor
 Pillow
 djangorestframework
+django-static-jquery-ui