GH-121970: Improve the glossary preview in HTML search (#121991)

1 files changed, 12 insertions, 57 deletions

diff --git a/Doc/tools/templates/search.html b/Doc/tools/templates/search.html
index 8529744..6ddac5f 100644
--- a/Doc/tools/templates/search.html
+++ b/Doc/tools/templates/search.html
@@ -2,61 +2,16 @@
 {% block extrahead %}
     {{ super() }}
     <meta name="robots" content="noindex">
-    <script type="text/javascript">
-        const GLOSSARY_PAGE = 'glossary.html';
-
-        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>';
-              let searchResults = document.getElementById('search-results');
-              searchResults.insertAdjacentHTML('afterbegin', RESULT_TEMPLATE);
-
-              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
-                  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
-                  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.style.display = '';
-                } else {
-                  document.getElementById('glossary-result').style.display = 'none';
-                }
-              }
-            })
-            .catch(function(error) {
-              console.error(error);
-            });
-        });
-    </script>
+    <script type="text/javascript" src="{{ pathto('_static/glossary_search.js', resource=True) }}"></script>
+{% endblock %}
+{% block searchresults %}
+<div id="search-results">
+  {# For glossary_search.js #}
+  <div style="display: none;" class="admonition seealso" id="glossary-result">
+    <p class="topic-title">
+    <a id="glossary-title" href="#"></a>
+    </p>
+  <div id="glossary-body"></div>
+</div>
+</div>
 {% endblock %}