https://www.info.diva-portal.org/download/18.44b50ef7182d2dc6e817d…/correct-width-for-search-suggestions.js

1/**
2 * It adjusts the width and position of the search suggestion list that is shown when the Sitevision
3 * search module is used. The width is set to the width of the search input, except when it is
4 * smaller than the value of MIN_INPUT_WIDTH.
5 *
6 * If there are more than one Sitevision search module on the same page the behavior is undefined.
7 *
8 * Source: misc-js/correct-width-for-search-suggestions.js
9 */
10
11document.addEventListener('DOMContentLoaded', () => {
12  // Get all search input elements and search suggestion elements
13  const searchInputElements = document.querySelectorAll(
14    // eslint-disable-next-line max-len
15    '.sv-searchform-portlet input[type=text], .sv-facetedsearch-portlet input[type=text], .search-portlet-wrapper input[type=search]:not(.search-form-input-search-page)'
16  );
17
18  const searchSuggestionsElements = document.querySelectorAll('.sv-autocomplete-search-result');
19
20  // Add a focus event listener to each search input element
21  searchInputElements.forEach((searchInputElement, index) => {
22    searchInputElement.addEventListener('focus', () => {
23      // Get the corresponding search suggestions element
24      const focusedSearchSuggestionsElement = searchSuggestionsElements[index];
25
26      // Calculate the input width
27      const inputWidth = searchInputElement.getBoundingClientRect().width;
28
29      // Calculate the left offset of the input element
30      const inputLeft = searchInputElement.getBoundingClientRect().left + window.scrollX;
31
32      // Apply the adjusted width and left position to the search suggestions element
33      if (window.innerWidth > 575) {
34        focusedSearchSuggestionsElement.style.maxWidth = `${inputWidth}px`;
35      } else {
36        const searchInputParentNode = searchInputElement.parentNode;
37        const searchInputParentNodeWidth = searchInputParentNode.getBoundingClientRect().width;
38
39        focusedSearchSuggestionsElement.style.maxWidth = `${searchInputParentNodeWidth}px`;
40      }
41      focusedSearchSuggestionsElement.style.left = `${inputLeft}px`;
42    });
43  });
44});