Implementing autocomplete for GFM milestone references

app/assets/javascripts/gfm_auto_complete.js.coffee

@@ -18,6 +18,10 @@ GitLab.GfmAutoComplete =
   Issues:
     template: '<li><small>${id}</small> ${title}</li>'
 
+  # Milestones
+  Milestones:
+    template: '<li>${title}</li>'
+
   # Add GFM auto-completion to all input fields, that accept GFM input.
   setup: (wrap) ->
     @input = $('.js-gfm-input')
@@ -81,6 +85,19 @@ GitLab.GfmAutoComplete =
             title:  sanitize(i.title)
             search: "#{i.iid} #{i.title}"
 
+    @input.atwho
+      at: '%'
+      alias: 'milestones'
+      searchKey: 'search'
+      displayTpl: @Milestones.template
+      insertTpl: '${atwho-at}${id}'
+      callbacks:
+        beforeSave: (milestones) ->
+          $.map milestones, (m) ->
+            id:     m.iid
+            title:  sanitize(m.title)
+            search: "#{m.title}"
+
     @input.atwho
       at: '!'
       alias: 'mergerequests'
@@ -105,6 +122,8 @@ GitLab.GfmAutoComplete =
     @input.atwho 'load', '@', data.members
     # load issues
     @input.atwho 'load', 'issues', data.issues
+    # load milestones
+    @input.atwho 'load', 'milestones', data.milestones
     # load merge requests
     @input.atwho 'load', 'mergerequests', data.mergerequests
     # load emojis

app/controllers/projects_controller.rb

@@ -147,6 +147,7 @@ class ProjectsController < Projects::ApplicationController
     @suggestions = {
       emojis: AwardEmoji.urls,
       issues: autocomplete.issues,
+      milestones: autocomplete.milestones,
       mergerequests: autocomplete.merge_requests,
       members: participants
     }

app/services/projects/autocomplete_service.rb

@@ -4,6 +4,10 @@ module Projects
       @project.issues.visible_to_user(current_user).opened.select([:iid, :title])
     end
 
+    def milestones
+      @project.milestones.active.select([:iid, :title])
+    end
+
     def merge_requests
       @project.merge_requests.opened.select([:iid, :title])
     end