[3.12] Docs search: Replace jQuery with vanilla JavaScript (GH-106743) (#106802)

miss-islington · hugovk · web-flow · commit 30c8915a1996 · 2023-07-16T11:38:08.000+03:00
Docs search: Replace jQuery with vanilla JavaScript (GH-106743) * Replace jQuery with vanilla JavaScript * Switch 'var' to 'const' or 'let' (cherry picked from commit c02ee45) Co-authored-by: Hugo van Kemenade <hugovk@users.noreply.github.com>
diff --git a/Doc/tools/templates/search.html b/Doc/tools/templates/search.html
@@ -1,48 +1,62 @@
 {% extends "!search.html" %}
 {% block extrahead %}
     {{ super() }}
+    <meta name="robots" content="noindex">
     <script type="text/javascript">
-        var GLOSSARY_PAGE = 'glossary.html';
+        const GLOSSARY_PAGE = 'glossary.html';
 
-        jQuery(function() {
-            $.getJSON("_static/glossary.json", function(glossary) {
-                var RESULT_TEMPLATE = '<div style="display: none" class="admonition seealso" id="glossary-result">' +
+        document.addEventListener('DOMContentLoaded', function() {
+          fetch('_static/glossary.json')
+            .then(function(response) {
+              if (response.ok) {
+                return response.json();
+              } else {
+                throw new Error('Failed to fetch glossary.json');
+              }
+            })
+            .then(function(glossary) {
+              const RESULT_TEMPLATE = '<div style="display: none" class="admonition seealso" id="glossary-result">' +
                                       '  <p class="topic-title">' +
                                       '    <a class="glossary-title" href="#"></a>' +
                                       '  </p>' +
                                       '  <div class="glossary-body"></div>' +
                                       '</div>';
-                $("#search-results").prepend(RESULT_TEMPLATE);
+              let searchResults = document.getElementById('search-results');
+              searchResults.insertAdjacentHTML('afterbegin', RESULT_TEMPLATE);
 
-                var params = $.getQueryParameters();
-                if (params.q) {
-                    var search_param = params.q[0].toLowerCase();
-                    var glossary_item = glossary[search_param];
-                    if (glossary_item) {
-                        var resultDiv = $("#glossary-result");
+              const params = new URLSearchParams(document.location.search).get("q");
+              if (params) {
+                const searchParam = params.toLowerCase();
+                const glossaryItem = glossary[searchParam];
+                if (glossaryItem) {
+                  let resultDiv = document.getElementById('glossary-result');
 
-                        // set up the title text with a link to the glossary page
-                        resultDiv.find(".glossary-title").text('Glossary: ' + glossary_item.title);
-                        var link_target = search_param.replace(/ /g, '-');
-                        resultDiv.find(".glossary-title").attr(
-                            'href', GLOSSARY_PAGE + '#term-' + link_target
-                        );
+                  // set up the title text with a link to the glossary page
+                  let glossaryTitle = resultDiv.querySelector('.glossary-title');
+                  glossaryTitle.textContent = 'Glossary: ' + glossaryItem.title;
+                  const linkTarget = searchParam.replace(/ /g, '-');
+                  glossaryTitle.href = GLOSSARY_PAGE + '#term-' + linkTarget;
 
-                        // rewrite any anchor links (to other glossary terms)
-                        // to have a full reference to the glossary page
-                        var body = $(glossary_item.body).children();
-                        body.find("a[href^='#']").each(function() {
-                            var current_url = $(this).attr('href');
-                            $(this).attr('href', GLOSSARY_PAGE + current_url);
-                        });
-                        resultDiv.find(".glossary-body").html(body);
+                  // rewrite any anchor links (to other glossary terms)
+                  // to have a full reference to the glossary page
+                  let body = document.createElement('div');
+                  body.innerHTML = glossaryItem.body;
+                  const anchorLinks = body.querySelectorAll('a[href^="#"]');
+                  anchorLinks.forEach(function(link) {
+                    const currentUrl = link.getAttribute('href');
+                    link.href = GLOSSARY_PAGE + currentUrl;
+                  });
+                  resultDiv.querySelector('.glossary-body').appendChild(body);
 
-                        resultDiv.show();
-                    } else {
-                        $("#glossary-result").hide('');
-                    }
+                  resultDiv.style.display = '';
+                } else {
+                  document.getElementById('glossary-result').style.display = 'none';
                 }
+              }
+            })
+            .catch(function(error) {
+              console.error(error);
             });
         });
     </script>
-{% endblock %}
+{% endblock %}
