Fix underlying logic with adding presenters.

src/app/assets/javascripts/application.js

@@ -13,7 +13,6 @@
 //= require jquery
 //= require jquery_ujs
 //= require jquery.scrollTo.min
-//= require typeahead.min
 //= require fancybox
 
 var Sessionizer = {};

src/app/assets/stylesheets/application.css.scss

@@ -9,7 +9,6 @@
  * compiled file, but it's generally better to create a new file per style scope.
  *
  *= require_self
- *= require typeahead.min
  *= require fancybox
  *= require formtastic
  *= require formtastic_changes
@@ -20,7 +19,3 @@
  *= require tables
  *= require_tree .
  */
-
-
-
-

src/app/controllers/presentations_controller.rb

@@ -9,16 +9,14 @@ def index
   end
 
   def create
-    # super lame: look up the person by name. Twitter's typeahead library doesn't currently have a way to report an item's been selected.
-
-    participant = Participant.where(:name => params[:name]).first
+    participant = Participant.find(params[:id])
 
     if participant.nil?
-      flash[:error] = "Sorry, no presenter named '#{params[:name]}' was found. Please try again."
+      flash[:error] = "Sorry, no presenter named #{params[:name]} was found. Please try again."
       redirect_to session_presentations_path(@session)
       return
     elsif participant.signed_code_of_conduct_for_current_event? == false
-      flash[:error] = "Sorry, '#{params[:name]}' hasn't signed the Code of Conduct for this event."
+      flash[:error] = "Sorry, #{params[:name]} hasn't signed the current Code of Conduct."
       redirect_to session_presentations_path(@session)
       return
     end

src/app/views/layouts/application.html.erb

@@ -8,7 +8,8 @@
     <%= stylesheet_link_tag "https://fonts.googleapis.com/css?family=Roboto:500|Titillium+Web:400,600" %>
     <%= favicon_link_tag 'favicon.ico' %>
     <%= yield(:head) %>
-
+    <script src="https://cdn.jsdelivr.net/npm/@tarekraafat/[email protected]/dist/autoComplete.min.js" integrity="sha256-4I3RT0XAGHdtIpMb28AtxL0vdMZBftsRgY6xRhzqnAM=" crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tarekraafat/[email protected]/dist/css/autoComplete.02.min.css">
     <meta property="og:title" content="<%= yield(:title) || t('conference') %>" />
     <meta name="twitter:title" content="<%= yield(:title) || t('conference') %>">
     <meta name="twitter:card" content="summary_large_image">

src/app/views/presentations/index.html.erb

@@ -8,23 +8,46 @@
 <% end %>
 </ul>
 
-<h2>Add presenters</h2>
-
-<p><strong>Note:</strong> In order to add a presenter to your session, they must be registered in the system and have agreed to the Code of Conduct.</p>
+<p>
+  Presenters must be registered and have agreed to the current Code of Conduct.
+</p>
 
 <%= semantic_form_for([@session, @presentation]) do |f| %>
-<%= text_field_tag 'name', '', :placeholder => 'Type a name', :id => 'typeahead' %> <%= submit_tag 'Add', :id => 'add-presenter' %>
+  <%= text_field_tag 'name', '', :id => 'autoComplete', :style => 'padding-left: 10px;', :autocomplete => "off" %>
+  <%= hidden_field_tag 'id', '', :id => 'autoCompleteValue' %>
+  <%= submit_tag 'Add Presenter', :id => 'add-presenter', :class => 'button' %>
 <% end %>
 
 <% content_for :javascript do %>
 $(function() {
-  $('#typeahead').typeahead(
-    {name: 'presenters',
-     prefetch: '/participants.json'}
-   );
+  fetch('/participants.json').then(source => {
+    const autoCompleteJS = new autoComplete({
+      placeHolder: 'Search for name',
+      data: {
+        src: source.json(),
+        cache: true,
+        keys: ['value']
+      },
+      events: {
+        input: {
+          selection: (event) => {
+            const selection = event.detail.selection.value;
+            autoCompleteJS.input.value = selection.value;
+
+            const ele = document.getElementById("autoCompleteValue");
+            ele.value = selection.id;
+          }
+        }
+      },
+      resultItem: {
+        tag: "li",
+        class: "autoComplete_result",
+        highlight: "autoComplete_highlight",
+        selected: "autoComplete_selected"
+    },
+    });
+  });
 });
-
-
 <% end %>
 
 <p style="margin-top: 120px">