Replace Chosen.js with TomSelect for member lookup

app/assets/javascripts/application.js

@@ -40,12 +40,43 @@ $(function() {
     format: "HH:i",
   });
 
+  // TomSelect for admin member lookup
+  if ($('#member_lookup_id').length) {
+    new TomSelect('#member_lookup_id', {
+      placeholder: 'Type to search members...',
+      valueField: 'id',
+      labelField: 'full_name',
+      searchField: ['full_name', 'email'],
+      create: false,
+      loadThrottle: 300,
+      shouldLoad: function(query) {
+        return query.length >= 3;
+      },
+      load: function(query, callback) {
+        fetch('/admin/members/search?q=' + encodeURIComponent(query))
+          .then(response => response.json())
+          .then(json => callback(json))
+          .catch(() => callback());
+      },
+      render: {
+        option: function(item, escape) {
+          return '<div>' + escape(item.full_name) + ' <small class="text-muted">' + escape(item.email) + '</small></div>';
+        }
+      }
+    });
+
+    $('#member_lookup_id').on('change', function() {
+      $('#view_profile').attr('href', '/admin/members/' + $(this).val());
+    });
+  }
+
+  // Chosen for all other selects (exclude #member_lookup_id)
   // Chosen hides inputs and selects, which becomes problematic when they are
   // required: browser validation doesn't get shown to the user.
   // This fix places "the original input behind the Chosen input, matching the
   // height and width so that the warning appears in the correct position."
   // https://github.com/harvesthq/chosen/issues/515#issuecomment-474588057
-  $('select').on('chosen:ready', function () {
+  $('select').not('#member_lookup_id').on('chosen:ready', function () {
     var height = $(this).next('.chosen-container').height();
     var width = $(this).next('.chosen-container').width();
 
@@ -57,14 +88,10 @@ $(function() {
     }).show();
   });
 
-  $('select').chosen({
+  $('select').not('#member_lookup_id').chosen({
     allow_single_deselect: true,
     no_results_text: 'No results matched'
   });
 
-  $('#member_lookup_id').change(function(e) {
-    $('#view_profile').attr('href', '/admin/members/' + $(this).val())
-  });
-
   $('[data-bs-toggle="tooltip"]').tooltip();
 });

app/controllers/admin/members_controller.rb

@@ -2,7 +2,25 @@ class Admin::MembersController < Admin::ApplicationController
   before_action :set_member, only: %i[events update_subscriptions send_attendance_email send_eligibility_email]
 
   def index
-    @members = Member.all
+    # @members = Member.all removed - members loaded dynamically via search
+  end
+
+  def search
+    query = params[:q].to_s.strip
+
+    members = if query.length >= 3
+      Member.where(
+        "CONCAT(name, ' ', surname) ILIKE :q OR email ILIKE :q",
+        q: "%#{query}%"
+      ).select(:id, :name, :surname, :email, :pronouns).limit(50)
+    else
+      []
+    end
+
+    render json: members.as_json(
+      only: %i[id name surname email],
+      methods: [:full_name]
+    )
   end
 
   def show

app/views/admin/members/index.html.haml

@@ -1,10 +1,14 @@
+- content_for :head do
+  %link{ href: 'https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/css/tom-select.bootstrap5.min.css', rel: 'stylesheet', type: 'text/css' }
+  %script{ src: 'https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/js/tom-select.complete.min.js' }
+
 .container.py-4.py-lg-5
   .row.mb-4
     .col
       %h1 Members Directory
   .row.mb-4
     .col-12.col-md-6
-      = select_tag 'member_lookup_id', options_for_select([['Select a member...', '']] + @members.collect{ |u| ["#{u.full_name} (#{u.email})", u.id] }), { class: 'chosen-select' }
+      = select_tag 'member_lookup_id', nil, class: 'form-control'
   .row
     .col
       = link_to 'View Profile', '#', { class: 'btn btn-primary', id: 'view_profile' }

config/routes.rb

@@ -96,6 +96,7 @@
     resources :announcements, only: %i[new index create edit update]
 
     resources :members, only: %i[show index] do
+      get :search, on: :collection
       get :events
       get :send_eligibility_email
       get :send_attendance_email