Implement options to select between Sphinx search and Google search

_static/css/custom.css

@@ -93,22 +93,5 @@
 }
 
 .pytorch-left-menu-search input[type=text] {
-    background-image: none;
-}
-
-.gsc-control-cse {
-   padding-left: 0px !important;
-   padding-bottom: 0px !important;
-}
-
-.gsc-search-button .gsc-search-button-v2:focus {
-   border: transparent !important;
-   outline: none;
-   box-shadow: none;
-}
-.gsc-search-button-v2:active {
-   border: none !important;
-}
-.gsc-search-button-v2 {
-   border: none !important;
+    background-image: url("../images/search-icon.svg");
 }

_static/css/custom2.css

@@ -35,3 +35,75 @@
 .pytorch-left-menu li.toctree-l1.current > a:before {
    content: "";
 }
+
+/* search radio button*/
+
+input[type="radio"] {
+    accent-color: #ee4c2c;
+}
+
+.gsst_b {
+    display: none;
+}
+
+#gsc-i-id1 {
+    height: 1.5rem;
+    text-indent: 12px !important; 
+    font-size: 1rem !important;
+    font-family: "FreightSansi";
+    background-image: url(../images/search-icon.svg) !important;
+    background-repeat: no-repeat !important;
+    background-size: 18px 18px !important;
+    background-position: 5px 0px !important;
+    padding-left: 20px !important;
+}
+
+#gsc-i-id1::placeholder {
+  font-family: 'FreightSans';
+  font-size: 1rem;
+  color: #262626;
+}
+
+.gsc-control-cse {
+   padding: 0 !important;
+   border-radius: 0px !important;
+   border: none !important;;
+   overflow: hidden;
+}
+
+#___gcse_0 {
+    height: 44px !important;
+    padding: 0 !important;
+}
+
+table.gsc-search-box td.gsc-input {
+    padding-right: 0 !important;
+}
+
+table.gsc-search-box td {
+    height: 44px;
+    margin-bottom: 0 !important;
+    padding-bottom: 0 !important;
+}
+
+.gsc-search-button-v2 {
+    display: none;
+}
+
+.gs_id50 {
+    width: 308px;
+}
+
+.gsib_a {
+    padding: 0px 8px 4px 9px !important;
+}
+
+.gsc-input-box {
+    border-radius: 0px !important;
+    border: none !important; 
+}
+
+form.gsc-search-box {
+    margin-bottom 0px;
+}
+

_templates/layout.html

@@ -1,6 +1,5 @@
 {% extends "!layout.html" %}
 
-
 <!-- Overrides needed for the multilevel nav -->
 {% block menu %}
     {% if 'singlehtml' not in builder %}
@@ -30,24 +29,87 @@
 {%- 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>
+    <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 Docs" />
+          <input type="hidden" name="check_keywords" value="yes" />
+          <input type="hidden" name="area" value="default" />
+        </form>
+      </div>
+    </div>
+  </div>
+  <form id="searchForm">
+    <label style="margin-bottom: 1rem">
+      <input type="radio" name="searchType" value="google" checked>
+      Google Search
+    </label>
+    <label style="margin-bottom: 1rem">
+      <input type="radio" name="searchType" value="sphinx">
+      Classic 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);
+      });
+      // Set placeholder text for Google search box
+      window.onload = function() {
+        var placeholderText = "Search Docs";
+        var googleSearchboxText = document.querySelector("#gsc-i-id1");
+        if (googleSearchboxText) {
+          googleSearchboxText.placeholder = placeholderText;
+          googleSearchboxText.style.fontFamily = 'FreightSans';
+          googleSearchboxText.style.fontSize = "1.2rem"; 
+          googleSearchboxText.style.color = '#262626';
+        } 
+      };
+    });
+  </script>
 {% endblock %}
 
-
 {% block footer %}
 {{ super() }}
 <script>