Started adding auto complete to contributors

app/assets/stylesheets/application.scss

@@ -389,3 +389,52 @@ table.dataTable {
 .user-edit-long-field {
   width: 400px;
 }
+
+.hidden-element {
+  display: none;
+}
+
+/* These are the styles used by the jQuery autocomplete plug-in */
+.autocomplete-suggestions {
+  border: 1px solid #999;
+  background: #FFF;
+  overflow: auto;
+}
+
+.autocomplete-suggestion {
+  padding: 2px 5px;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.autocomplete-selected {
+  background: #F0F0F0;
+}
+
+.autocomplete-suggestions strong {
+  font-weight: normal;
+  color: #3399FF;
+}
+
+.autocomplete-group {
+  padding: 2px 5px;
+}
+
+.autocomplete-group strong {
+  display: block;
+  border-bottom: 1px solid #000;
+}
+
+/*
+ * Adds the arrow to the autocomplete textbox.
+ * Notice that since CSS does not allow ::after on HTML <input> we apply this style to an HTML <span>.
+ * See https://stackoverflow.com/questions/2587669/can-i-use-a-before-or-after-pseudo-element-on-an-input-field
+ */
+.autocomplete-arrow::after {
+  content: "▾";
+  margin-left: -20px;
+}
+
+.autocomplete-error {
+  color: var(--Secondary-Red-Dark, #b00002);
+}

app/controllers/creators_controller.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+class CreatorsController < ApplicationController
+  before_action :authenticate_user!
+
+  def ajax_list
+    creators = { suggestions: [
+      { value: 'Claudia', data: 'cl7359' },
+      { value: 'Hector', data: 'hc8719' },
+      { value: 'Kate', data: 'klynch' },
+      { value: 'Jaymee', data: 'jhypolitte' }
+    ]
+  }
+    render json: creators.to_json
+  end
+end

app/views/layouts/application.html.erb

@@ -23,6 +23,9 @@
     <!-- Provides https://jqueryui.com/sortable/ and /autocomplete/-->
     <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
 
+    <!-- Load our local Autocomplete plug-in which is a copy of https://github.com/devbridge/jQuery-Autocomplete -->
+    <script src="<%= root_path + 'jquery.autocomplete.js' %>"></script>
+
     <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css"/>
     <script type="text/javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
     <%= favicon_link_tag asset_path('favicon.png') %>

app/views/works/_funder_table.html.erb

@@ -52,3 +52,5 @@
     </tfoot>
   </table>
 </div>
+
+

app/views/works/_required_creators_table.html.erb

@@ -43,11 +43,11 @@
         <tr class="creators-table-row">
         <td>
           <span class="hidden given-name-required-message"><i class="bi bi-exclamation-diamond-fill required-field"></i>&nbsp;Must provide a given name</span>
-          <input name="creators[][given_name]" value="<%= creator&.given_name %>" class="given-entry-creator" />
+          <input id="creator-row-givenname" name="creators[][given_name]" value="<%= creator&.given_name %>" class="given-entry-creator" />
         </td>
         <td class="creators-table-row-family-name">
           <span class="hidden family-name-required-message"><i class="bi bi-exclamation-diamond-fill required-field"></i>&nbsp;Must provide a family name</span>
-          <input name="creators[][family_name]" value="<%= creator&.family_name %>" class="family-entry-creator" />
+          <input  id="creator-row-familyname" name="creators[][family_name]" value="<%= creator&.family_name %>" class="family-entry-creator" />
         </td>
         <td>
           <input name="creators[][orcid]" value="<%= creator&.orcid %>" class="orcid-entry-creator"  placeholder="0000-0000-0000-0000" />
@@ -77,3 +77,26 @@
   </table>
 </div>
 
+<script>
+  // debugger;
+  // Documentation: https://github.com/devbridge/jQuery-Autocomplete
+  $('#creator-row-givenname').devbridgeAutocomplete({
+      serviceUrl: '/creators/ajax-list',
+      // lookup: creators,
+      onSelect: function (suggestion) {
+        $("#creator-row-familyname").val(suggestion.data);
+      }
+  });
+
+  // Settings that we use in TigerData
+  // $(elementId).autocomplete({
+  //   minChars: 1,
+  //   autoSelectFirst: true,
+  //   showNoSuggestionNotice: true,
+  //   noSuggestionNotice: "No results found",
+  //   lookup: data,
+  //   onSelect: function (suggestion) {
+  //       $(elementId).val(suggestion.data);
+  //   }
+  // });
+</script>

config/routes.rb

@@ -93,7 +93,10 @@
 
   get "/collections/:id", to: redirect("/groups/%{id}"), as: :collections
   get "/reports/dataset-list", to: "reports#dataset_list", as: :reports_dataset_list
-
+
+  # creators
+  get "creators/ajax-list", to: "creators#ajax_list", as: :creators_ajax_list
+
   # Anything still unmatched by the end of the routes file should go to the not_found page
   # match '*a', to: redirect('/404'), via: :get