Multi-search Prototype

This page demonstrates the ability to create a toggle option on a search bar and choose to search the website using OC's out-of-the-box search or kick out to an external search by providing a search term as a parameter.

Please test and try to break this! :)

 

You can see the JS / CSS by viewing the page source, then Ctrl + F "goSearch".

 

Notes:

  • This is a completely "front-end" solution using only JS / CSS on page load - This makes it highly portable from theme to theme or site to site (I would consider this a "snippet").
  • This is achieved by including an embed on this prototype page (so this is the only page affected by this code)
  • On a proper implementation the JavaScript would be moved to plugins.js and the CSS to client.scss (only 1 color code update should be required)
  • The injected markup is set to inherit the theme styling of the default search box - some implementations may require CSS tweaks
  • All out of the box site search features are undisturbed
  • Radio buttons have custom styling to provide a consistent experience across browsers
  • ARIA attributes have been added to improve accessibility
  • The target URL for the external search is handled on one line in the JS - external search opens in a new window by default (configurable)
  • Popup blockers could affect search results opening in a new window - more testing required, option to open results in the same window available

Testing

Testing has been done on the following items:

  • JavaScript loads on page load and injects the required markup
  • Visual consistency of radio buttons, spacing, and alignment
  • Ability to toggle using mouse and keyboard
  • Hover / focus states behave as expected
  • ARIA attributes update as expected - inspected on PC/MAC, inferred on mobile devices
  • Correct search block is shown based on radio selection
  • Functionality of site search behaves as expected - focus to text input, focus to submit input, focus back out to radio buttons, predictive search suggestions, trigger search by pressing enter on both input or button
  • Functionality of external search behaves as expected - focus to text input, focus to submit input, focus back out to radio buttons, trigger search by pressing enter on both text input or button, search opens in new window / tab

Testing has been performed on the following physical devices / browsers:

  • Chrome (PC/Mac) - PASSED
  • Firefox (PC/Mac) - PASSED
  • Safari (Mac) - PASSED
  • Edge (PC) - PASSED
  • Safari (iOS - iPhone 12 / iPad) - PASSED
  • Chrome (iOS - iPhone 12 / iPad) - PASSED

Virtual devices using BrowserStack.com

  • Windows 10 / Edge 89 (older edge version) - PASSED
  • Windows 10 / IE 11 - FAILED : not able to render template literals ES6 JS functionality - browser usage worldwide < 1% (latest stats show < .5%) StatCounter Global Stats , official browser support ends June 15, 2022.
  • Android Samsung GalaxyS20 (Chrome, Samsung Internet) - PASSED
  • Android Google Pixel 4 (Chrome) - PASSED
Back to top