From f853b94fa3acc607fcfd18a86cfd40ed0892e8c5 Mon Sep 17 00:00:00 2001
From: Marlo Longley <mlongley@stanford.edu>
Date: Wed, 2 Apr 2025 17:15:09 -0400
Subject: [PATCH] Limit autocomplete to keyword searches

Closes #864
---
 app/javascript/application.js         |  3 +++
 app/javascript/autocomplete_toggle.js | 21 ++++++++++++++++
 config/importmap.rb                   |  1 +
 spec/features/search_spec.rb          | 35 +++++++++++++++++++++++++++
 4 files changed, 60 insertions(+)
 create mode 100644 app/javascript/autocomplete_toggle.js

diff --git a/app/javascript/application.js b/app/javascript/application.js
index b296591e..3274583e 100644
--- a/app/javascript/application.js
+++ b/app/javascript/application.js
@@ -4,6 +4,7 @@ import "controllers"
 import bootstrap from "bootstrap"
 import githubAutoCompleteElement from "@github/auto-complete-element"
 import Blacklight from "blacklight"
+import initializeAutocompleteToggle from "autocomplete_toggle"
 
 import "arclight"
 
@@ -11,6 +12,8 @@ Blacklight.onLoad(() => {
     // Initialize Bootstrap tooltips
     const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
     const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
+
+    initializeAutocompleteToggle();
 })
 import BlacklightRangeLimit from "blacklight-range-limit";
 BlacklightRangeLimit.init({onLoadHandler: Blacklight.onLoad });
diff --git a/app/javascript/autocomplete_toggle.js b/app/javascript/autocomplete_toggle.js
new file mode 100644
index 00000000..045039ae
--- /dev/null
+++ b/app/javascript/autocomplete_toggle.js
@@ -0,0 +1,21 @@
+export default function initializeAutocompleteToggle() {
+  const searchField = document.querySelector('#search_field');
+  const autocomplete = document.querySelector('.search-autocomplete-wrapper');
+  const autocompleteSrc = autocomplete?.src;
+
+  // Update the autocomplete display based on the selected search field value
+  function updateAutocompleteDisplay() {
+    const selectedSearchField = searchField.value;
+
+    if (selectedSearchField === "keyword") {
+      autocomplete.setAttribute("src", autocompleteSrc)
+    } else {
+      // Remove the src attribute to hide the autocomplete
+      autocomplete.removeAttribute("src");
+    }
+  }
+
+  if (searchField && autocomplete) {
+    searchField.addEventListener('change', updateAutocompleteDisplay);
+  }
+}
diff --git a/config/importmap.rb b/config/importmap.rb
index c48c6f86..35862536 100644
--- a/config/importmap.rb
+++ b/config/importmap.rb
@@ -7,6 +7,7 @@
 pin '@hotwired/stimulus', to: 'stimulus.min.js', preload: true
 pin '@hotwired/stimulus-loading', to: 'stimulus-loading.js', preload: true
 pin_all_from 'app/javascript/controllers', under: 'controllers'
+pin 'autocomplete_toggle', to: 'autocomplete_toggle.js'
 pin '@github/auto-complete-element', to: 'https://cdn.skypack.dev/@github/auto-complete-element'
 pin '@popperjs/core', to: 'https://ga.jspm.io/npm:@popperjs/core@2.11.8/dist/umd/popper.min.js'
 pin 'bootstrap', to: 'https://ga.jspm.io/npm:bootstrap@5.3.3/dist/js/bootstrap.js'
diff --git a/spec/features/search_spec.rb b/spec/features/search_spec.rb
index afb60f40..9d8d23d9 100644
--- a/spec/features/search_spec.rb
+++ b/spec/features/search_spec.rb
@@ -47,4 +47,39 @@
       expect(page.current_url).to include('group=true')
     end
   end
+
+  context 'with keyword search' do
+    it 'displays the autocomplete dropdown suggetsions' do
+      visit search_catalog_path
+      select('Keyword', from: 'search_field')
+      fill_in 'q', with: 'france'
+
+      # use xpath because <auto-complete> is a custom web component that capybara can't otherwise find
+      src_value = find(:xpath, './/auto-complete')[:src]
+      expect(src_value).to eq('/catalog/suggest')
+
+      expect(page).to have_css('#autocomplete-popup', visible: :visible)
+    end
+  end
+
+  context 'with a non-keyword search' do
+    it 'can toggle the autocomplete functionality from off to on' do
+      visit search_catalog_path
+      select('Place', from: 'search_field')
+      fill_in 'q', with: 'france'
+
+      # use xpath because <auto-complete> is a custom web component that capybara can't otherwise find
+      src_value = find(:xpath, './/auto-complete')[:src]
+      expect(src_value).to be_empty
+      expect(page).to have_css('#autocomplete-popup', visible: :hidden)
+
+      # Autocomplete should work again
+      select('Keyword', from: 'search_field')
+      fill_in 'q', with: 'france'
+
+      src_value = find(:xpath, './/auto-complete')[:src]
+      expect(src_value).to eq('/catalog/suggest')
+      expect(page).to have_css('#autocomplete-popup', visible: :visible)
+    end
+  end
 end