2 files changed, 25 insertions, 56 deletions
diff --git a/app/assets/javascripts/dispatcher.js.coffee b/app/assets/javascripts/dispatcher.js.coffee
index a39df421832..9493a575801 100644
--- a/app/assets/javascripts/dispatcher.js.coffee
+++ b/app/assets/javascripts/dispatcher.js.coffee
@@ -127,7 +127,7 @@ class Dispatcher
           when 'groups'
             new UsersSelect()
           when 'projects'
-            new NamespaceSelects()
+            new NamespaceSelect()
       when 'dashboard', 'root'
         shortcut_handler = new ShortcutsDashboardNavigation()
       when 'profiles'
diff --git a/app/assets/javascripts/namespace_select.js.coffee b/app/assets/javascripts/namespace_select.js.coffee
index 3b419dff105..a02c4515ccc 100644
--- a/app/assets/javascripts/namespace_select.js.coffee
+++ b/app/assets/javascripts/namespace_select.js.coffee
@@ -1,56 +1,25 @@
 class @NamespaceSelect
-  constructor: (opts) ->
-    {
-      @dropdown
-    } = opts
-
-    showAny = true
-    fieldName = 'namespace_id'
-
-    if @dropdown.attr 'data-field-name'
-     fieldName = @dropdown.data 'fieldName'
-
-    if @dropdown.attr 'data-show-any'
-      showAny = @dropdown.data 'showAny'
-
-    @dropdown.glDropdown(
-      filterable: true
-      selectable: true
-      filterRemote: true
-      search:
-        fields: ['path']
-      fieldName: fieldName
-      toggleLabel: (selected) ->
-        return if not selected.id? then selected.text else "#{selected.kind}: #{selected.path}"
-      data: (term, dataCallback) ->
-        Api.namespaces term, (namespaces) ->
-          if showAny
-            anyNamespace =
-              text: 'Any namespace'
-              id: null
-
-            namespaces.unshift(anyNamespace)
-            namespaces.splice 1, 0, 'divider'
-
-          dataCallback(namespaces)
-      text: (namespace) ->
-        return if not namespace.id? then namespace.text else "#{namespace.kind}: #{namespace.path}"
-      renderRow: @renderRow
-      clicked: @onSelectItem
-    )
-
-  onSelectItem: (item, el, e) =>
-    e.preventDefault()
-
-class @NamespaceSelects
-  constructor: (opts = {}) ->
-    {
-      @$dropdowns = $('.js-namespace-select')
-    } = opts
-
-    @$dropdowns.each (i, dropdown) ->
-      $dropdown = $(dropdown)
-
-      new NamespaceSelect(
-        dropdown: $dropdown
-      )
+  constructor: ->
+    namespaceFormatResult = (namespace) ->
+      markup = "<div class='namespace-result'>"
+      markup += "<span class='namespace-kind'>" + namespace.kind + "</span>"
+      markup += "<span class='namespace-path'>" + namespace.path + "</span>"
+      markup += "</div>"
+      markup
+
+    formatSelection = (namespace) ->
+      namespace.kind + ": " + namespace.path
+
+    $('.ajax-namespace-select').each (i, select) ->
+      $(select).select2
+        placeholder: "Search for namespace"
+        multiple: $(select).hasClass('multiselect')
+        minimumInputLength: 0
+        query: (query) ->
+          Api.namespaces query.term, (namespaces) ->
+            data = { results: namespaces }
+            query.callback(data)
+
+        dropdownCssClass: "ajax-namespace-dropdown"
+        formatResult: namespaceFormatResult
+        formatSelection: formatSelection