Limit autocomplete to keyword searches

Closes #864

Author: marlo-longley

app/javascript/application.js

@@ -4,13 +4,16 @@ import "controllers"
 import bootstrap from "bootstrap"
 import githubAutoCompleteElement from "@github/auto-complete-element"
 import Blacklight from "blacklight"
+import initializeAutocompleteToggle from "autocomplete_toggle"
 
 import "arclight"
 
 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 });

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);
+  }
+}

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'

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