Create a generic autocomplete handler

This allows us to provide autocomplete functionality with minimal effort. In addition this reduces the code / assets we have to send to clients and since the code got moved to our assets we benefit from minified js code.
openSUSE · Jan 4, 2019 · a535e4f · a535e4f
1 parent d332afe
commit a535e4f
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 22 deletions.
diff --git a/src/api/app/assets/javascripts/webui2/autocomplete.js b/src/api/app/assets/javascripts/webui2/autocomplete.js
@@ -1,3 +1,21 @@
+$(document).ready(function() {
+  $('.obs-autocomplete').each(function() {
+    $(this).autocomplete({
+      // Note: 'append' is optional and only needed when there is no element with class ui-front
+      appendTo:  $(this).data('append'),
+      source:    $(this).data('source'),
+      minLength: 2,
+      search: function() {
+        $(this).prev().find('i').toggleClass('fa-search fa-spinner fa-spin');
+      },
+      response: function() {
+        $(this).prev().find('i').toggleClass('fa-search fa-spinner fa-spin');
+      }
+    });
+  });
+});
+
+
 function autocompleteDevelProject(sourcePath) { // jshint ignore:line
   $("#devel_project").autocomplete({
     appendTo: '.modal-body',

diff --git a/src/api/app/views/webui2/shared/user_or_groups_roles/_add_group_dialog.html.haml b/src/api/app/views/webui2/shared/user_or_groups_roles/_add_group_dialog.html.haml
@@ -5,35 +5,18 @@
         .modal-header
           %h5.modal-title#edit-modal-label Add Group
         .modal-body
-          .form-group#add-group-role-modal-input
+          .form-group.ui-front
             = label_tag(:groupid, 'Group:')
             .input-group
               .input-group-prepend
-                %span.input-group-text#add-group-search-icon
-                  %i.fa.fa-search
-                  %i.fas.fa-spinner.fa-spin.d-none
-              = text_field_tag 'groupid', '', required: true, placeholder: 'Type to autocomplete...', class: 'form-control'
+                %span.input-group-text
+                  %i.fas.fa-search
+              = text_field_tag 'groupid', '', required: true, placeholder: 'Type to autocomplete...', class: 'obs-autocomplete form-control',
+                                              data: { source: url_for(controller: 'groups', action: 'autocomplete') }
           .form-group
             = label_tag(:role, 'Role:')
             = select_tag 'role', options_for_select(Role.local_roles, nil), required: true, class: 'form-control'
           = hidden_field_tag 'package', package
           = hidden_field_tag 'project', project
         .modal-footer
           = render partial: 'webui2/shared/dialog_action_buttons'
-
-:javascript
-  $('#groupid').autocomplete({
-    appendTo: '#add-group-role-modal-input',
-    source: '#{url_for controller: 'groups', action: 'autocomplete'}',
-    search: function(event, ui) {
-      var icon = $('#add-group-search-icon i:first-child');
-      icon.addClass('d-none');
-      icon.next().removeClass('d-none');
-    },
-    response: function(event, ui) {
-      var icon = $('#add-group-search-icon i:first-child');
-      icon.removeClass('d-none');
-      icon.next().addClass('d-none');
-    },
-    minLength: 2
-  });