Fixes #3994 - LDAP with many groups (<5k) and group role relation (>50) will crash in frontend.

app/assets/javascripts/app/controllers/_integration/ldap.coffee

@@ -479,7 +479,7 @@ class ConnectionWizard extends App.ControllerWizardModal
 
   buildRowGroupRole: (source, dest) =>
     el = $(App.view('integration/ldap_group_role_row')())
-    el.find('.js-ldapList').html(@createSelection('source', @wizardConfig.wizardData.backend_groups, source))
+    el.find('.js-ldapList').html(@createAutocompletion('source', @wizardConfig.wizardData.backend_groups, source))
     el.find('.js-roleList').html(@createSelection('dest', @wizardConfig.wizardData.roles, dest))
     el
 
@@ -496,6 +496,34 @@ class ConnectionWizard extends App.ControllerWizardModal
       class: 'form-control--small'
     )
 
+  # LDAP with many groups (<5k) and group role relation (>50) will crash in frontend #3994
+  createAutocompletion: (name, options, selected) ->
+    return App.UiElement.autocompletion.render(
+      id: "#{name}#{Math.floor( Math.random() * 999999 ).toString()}"
+      name: name
+      multiple: false
+      null: false
+      nulloption: false
+      class: 'form-control--small'
+      minLengt: -1 # show values without any value
+      value: selected
+      source: (request, response) ->
+        data    = Object.keys(options)
+        counter = 0
+        total   = 200
+        result  = []
+        for entry in data
+          continue if !entry.includes(request.term)
+          break if counter >= total
+          result.push(
+            id: entry
+            label: entry
+            value: entry
+          )
+          counter++
+        response(result)
+    , "#{name}_autocompletion_value_shown": selected)
+
   removeRow: (e) ->
     e.preventDefault()
     $(e.target).closest('tr').remove()

app/assets/javascripts/app/controllers/_ui_element/autocompletion.coffee

@@ -1,6 +1,6 @@
 # coffeelint: disable=camel_case_classes,no_interpolation_in_single_quotes
 class App.UiElement.autocompletion
-  @render: (attribute, params) ->
+  @render: (attribute, params = {}) ->
 
     if params[ attribute.name + '_autocompletion_value_shown' ]
       attribute.valueShown = params[ attribute.name + '_autocompletion_value_shown' ]
@@ -48,5 +48,11 @@ class App.UiElement.autocompletion
         select: (event, ui) ->
           b(event, ui.item)
       )
+      $(local_attribute_full).on('click', -> $(@).autocomplete('search', $(local_attribute_full).val()))
+      if attribute.value
+        $(local_attribute).val(attribute.value)
+      if attribute.valueShown
+        $(local_attribute_full).val(attribute.valueShown)
+
     App.Delay.set(a, 280, undefined, 'form_autocompletion')
     item