https://www.myalcon.com/modules/custom/alcon_search/js/script.js?tml2h9

1// This will add support of jQuery in Drupal Javascript close with (jQuery,
2// Drupal) and also include dependency in library yml
3(function ($, Drupal, drupalSettings) {
4  Drupal.behaviors.searchsuperscript = {
5    attach: function (context, settings) {
6      jQuery(document).ready(function ($) {
7
8        $(document).ready(function () {
9          $('.views-field-field-meta-tags a, .views-field-field-meta a, views-field-field-short-description p').html(function (index, html) {
10            return html
11              .replace(/®/g, '<sup>®</sup>')
12              .replace(/™/g, '<sup>™</sup>')
13              .replace(/©/g, '<sup>©</sup>');
14          });
15        });
16      });
17    }
18  };
19
20  Drupal.behaviors.searchSettings = {
21    attach: function (context, settings) {
22
23      // Instead of using - document.addEventListener('DOMContentLoaded', function() {.
24      if (context !== document) return;
25
26      // Get filtered search input text.
27      var searchTermFiltered = drupalSettings.search && drupalSettings.search.safeKeys ? drupalSettings.search.safeKeys : '';
28      console.log("Safe search term:", drupalSettings.search.safeKeys);
29
30      const container = document.querySelector('#main-content');
31      // Get the search input value
32      const searchInput = container.querySelector('[id="edit-alcon-search"]');
33
34      // <--begin code which was existing on js file -->
35 
36      // Identifying the header element rendenring in the search page. 
37      // It should exclude same forms added in main header mega menu search form.
38      const headers = container.querySelectorAll("header");
39      var searchResultsHeader = null;
40      // Loop through headers to find the one containing "search results"
41      for (var i = 0; i < headers.length; i++) {
42        if (headers[i].textContent.includes("results for")) {
43          searchResultsHeader = headers[i];
44          break;
45        }
46      }
47      if (searchResultsHeader) {
48        // Hide the original header which is coming above the form.
49        searchResultsHeader.style.display = 'none';
50
51        const exposedForm = container.querySelector('form[id^="views-exposed-form-solr-search-block"]') 
52        || container.querySelector('form[id^="views-exposed-form-solr-search-new-block"]')
53        || container.querySelector('form[id^="views-exposed-form-drupal-search-alcon-drupal-search"]')
54        || container.querySelector('form[id^="views-exposed-form-consumer-search-block-alcon-drupal-search"]')
55        || container.querySelector('form[id^="views-exposed-form-solr-searchstax-block"]');
56
57        // Move the header after the exposed form (though it will be hidden)
58        if (exposedForm) {
59          exposedForm.parentNode.insertBefore(searchResultsHeader, exposedForm.nextSibling);
60
61          // Create a new div for displaying the search term
62          var resultsCountDiv = document.createElement('div');
63          resultsCountDiv.className = 'search-page-results-count-text';
64
65          // Append the search input value to the new div
66          if (searchInput) {
67            var searchTerm = searchTermFiltered;
68
69            // Get the current header text and split it into words
70            var headerText = searchResultsHeader.textContent.trim();
71            var words = headerText.split(" ");
72
73            if (words.length > 0) {
74              // Bold the first word
75              words[0] = `<strong>${words[0]}</strong>`;
76
77              // Set the new HTML for the new div with the search term in single quotes
78              resultsCountDiv.innerHTML = words.join(" ") + `: <strong>'${searchTerm}'</strong>`;
79            }
80
81            // Insert the new div after the header
82            searchResultsHeader.parentNode.insertBefore(resultsCountDiv, searchResultsHeader.nextSibling);
83          }
84        }
85      }
86
87      // The below code was committed as part of GDMOC-9124: New Search functionality changes.
88      // But this code is getting overwritten by js injector.
89      // I am keeping this instead of older one in asset injector.
90      // No search result text.
91      if (searchInput) {
92        var searchTermText = searchTermFiltered;
93        let searchNoResultsMsgText = Drupal.t("No matches found for '@searchText'. Please try another search.", {'@searchText': searchTermText});
94        let searchNoResultsMsg = container.querySelector("#alcon-search-no-results-search-msg");
95
96        if (searchNoResultsMsg) {
97          if (window.location.search != '') {
98            searchNoResultsMsg.innerText = searchNoResultsMsgText;
99            searchNoResultsMsg.classList.add("alcon-search-no-results");
100          }
101        }
102      }
103
104
105      // Close button for search term within input field
106      // Only proceed if the input element exists
107      if (searchInput) {
108        const clearButton = document.createElement('span');
109        clearButton.textContent = '×';
110        clearButton.style.position = 'absolute';
111        clearButton.style.right = '10px';
112        clearButton.style.top = '50%';
113        clearButton.style.transform = 'translateY(-50%)';
114        clearButton.style.cursor = 'pointer';
115        clearButton.style.color = '#767676';
116        clearButton.style.fontSize = '16px';
117        clearButton.style.display = 'none';
118
119        // Ensure the parent is positioned relative
120        const parent = searchInput.parentNode;
121        if (parent) {
122          parent.style.position = 'relative';
123          parent.appendChild(clearButton);
124
125          // Show or hide the clear button based on input value
126          searchInput.addEventListener('searchInput', function() {
127              clearButton.style.display = searchInput.value ? 'block' : 'none';
128          });
129
130          // Clear input value when the clear button is clicked
131          clearButton.addEventListener('click', function() {
132              searchInput.value = '';
133              searchInput.focus();
134              clearButton.style.display = 'none';
135          });
136
137          // Initial check to show/hide the clear button
138          clearButton.style.display = searchInput.value ? 'block' : 'none';
139        }
140      }
141      // <--ends code on js file -->
142
143
144      // setAttribute 'aria-label' as 'Search'.
145      if (searchInput) {
146        searchInput.setAttribute('aria-label', 'Search');
147      }
148
149      // Copied from asset injector
150      const submitButton = document.getElementById('edit-submit-drupal-search');
151      if (submitButton) {
152        submitButton.addEventListener('click', function(event) {
153          var errorDiv = document.getElementById('search-error-message');
154
155          if (searchInput.value.trim() === '') {
156            event.preventDefault();
157            searchInput.style.border = '2px solid red';
158
159            if (!errorDiv) {
160              errorDiv = document.createElement('div');
161              errorDiv.id = 'search-error-message';

162              errorDiv.style.color = 'red';
163              errorDiv.textContent = 'Please enter a word';
164              searchInput.parentNode.appendChild(errorDiv);
165            }
166          } else {
167            if (errorDiv) {
168              errorDiv.remove();
169            }
170            searchInput.style.border = '';
171          }
172        });
173      }
174
175      // Auto-submit search when click filters.
176      if (window.location.search.indexOf('alcon-search=') !== -1) {
177
178        const formSelectors = [
179          'form[id^="views-exposed-form-drupal-search-"]',
180          'form[id^="views-exposed-form-searchstax-view-"]'
181        ];
182
183        formSelectors.forEach(function (selector) {
184          const exposedForm = document.querySelector(selector);
185
186          if (exposedForm && !exposedForm.hasAttribute('data-auto-submit-bound')) {
187            exposedForm.setAttribute('data-auto-submit-bound', 'true');
188
189            exposedForm.querySelectorAll('input[name="type"]').forEach(function (radio) {
190              radio.addEventListener('change', function () {
191                const submitButton = exposedForm.querySelector(
192                  'input[type="submit"], button[type="submit"]'
193                );
194
195                if (submitButton) {
196                  submitButton.click();
197                }
198              });
199            });
200          }
201        });
202      }  
203
204    }
205  };
206})(jQuery, Drupal, drupalSettings);