Update

Author: svekars

_static/css/custom2.css

@@ -35,3 +35,9 @@
 .pytorch-left-menu li.toctree-l1.current > a:before {
    content: "";
 }
+
+/* search radio button*/
+
+input[type="radio"] {
+    accent-color: #ee4c2c;
+}

_templates/layout.html

@@ -1,6 +1,5 @@
 {% extends "!layout.html" %}
 
-
 <!-- Overrides needed for the multilevel nav -->
 {% block menu %}
     {% if 'singlehtml' not in builder %}
@@ -30,23 +29,78 @@
 {%- endblock %}
 
 {% block sidebartitle %}
-    {% if theme_display_version %}
-      {%- set nav_version = version %}
-      {% if READTHEDOCS and current_version %}
-        {%- set nav_version = current_version %}
-      {% endif %}
-      {% if nav_version %}
-        <div class="version">
-            {{ nav_version }}
-        </div>
-      {% endif %}
+
+  {% if theme_display_version %}
+    {%- set nav_version = version %}
+    {% if READTHEDOCS and current_version %}
+      {%- set nav_version = current_version %}
     {% endif %}
-    <div class="searchbox">
-        <script async src="https://cse.google.com/cse.js?cx=e65585f8c3ea1440e"></script>
-        <div class="gcse-search"></div>
+    {% if nav_version %}
+      <div class="version">
+        {{ nav_version }}
+      </div>
+    {% endif %}
+  {% endif %}
+
+  <!-- Search box -->
+  <div id="searchBox">
+    <div class="searchbox" id="googleSearchBox">
+      <script async src="https://cse.google.com/cse.js?cx=e65585f8c3ea1440e"></script>
+      <div class="gcse-search"></div>
     </div>
-{% endblock %}
+    <div id="sphinxSearchBox" style="display: none;">
+      <div role="search">
+        <form id="rtd-search-form" class="wy-form" action="{{ pathto('search') }}" method="get">
+          <input type="text" name="q" placeholder="Search {{ search_project }}" />
+          <input type="hidden" name="check_keywords" value="yes" />
+          <input type="hidden" name="area" value="default" />
+        </form>
+      </div>
+    </div>
+  </div>
+    <!-- Radio buttons for search selection -->
+  <form id="searchForm">
+    <label>
+      <input type="radio" name="searchType" value="google" checked>
+      Google Search
+    </label>
+    <label>
+      <input type="radio" name="searchType" value="sphinx">
+      Sphinx Search
+    </label>
+  </form>
+
+  <script>
+     document.addEventListener('DOMContentLoaded', function() {
+      const searchForm = document.getElementById('searchForm');
+      const googleSearchBox = document.getElementById('googleSearchBox');
+      const sphinxSearchBox = document.getElementById('sphinxSearchBox');
+      // Function to toggle search box visibility
+      function toggleSearchBox(searchType) {
+        googleSearchBox.style.display = searchType === 'google' ? 'block' : 'none';
+        sphinxSearchBox.style.display = searchType === 'sphinx' ? 'block' : 'none';
+      }
+      // Determine the default search type
+      let defaultSearchType = 'google';
+      if (window.location.href.startsWith('https://docs-preview.pytorch.org/')) {
+        defaultSearchType = 'sphinx';
+      } else {
+        defaultSearchType = localStorage.getItem('searchType') || 'google';
+      }
+      // Set the default search type
+      document.querySelector(`input[name="searchType"][value="${defaultSearchType}"]`).checked = true;
+      toggleSearchBox(defaultSearchType);
+      // Event listener for changes in search type
+      searchForm.addEventListener('change', function(event) {
+        const selectedSearchType = event.target.value;
+        localStorage.setItem('searchType', selectedSearchType);
+        toggleSearchBox(selectedSearchType);
+      });
+    });
+  </script>
+  </script>
 
+{% endblock %}
 
 {% block footer %}
 {{ super() }}