Enable search-as-you type on Kedro-viz docs (#1727)

docs/source/_templates/layout.html

@@ -24,12 +24,33 @@
 
     heap.load({{ "522942930" }});
 
+    //inline styling for read-the-docs flyout
+    document.documentElement.style.setProperty('--readthedocs-flyout-font-size', '0.9em');
+
     // Wait for DOM to load and clone main nav into the sidebar
     document.addEventListener("DOMContentLoaded", function() {
-        var sidebarSearch = document.querySelector('.wy-side-nav-search div[role="search"]');
-        sidebarSearch.parentNode.insertBefore(document.querySelector('.wy-main-nav').cloneNode(true), sidebarSearch);
 
-  // Prepend close button to mobile header
+      function showReadTheDocsSearch() {
+        const searchEvent = new CustomEvent("readthedocs-search-show");
+        document.dispatchEvent(searchEvent);
+      }
+
+      // Activate read-the-docs search when user focuses on search
+      document.querySelector('div[role="search"] form input').addEventListener("focus", showReadTheDocsSearch);
+
+      // Add keyboard event listener for Cmd+K (Mac) or Ctrl+K (Windows)
+      document.addEventListener("keydown", function(e) {
+        if ((e.key === 'k' || e.key === 'K') && (e.metaKey || e.ctrlKey)) {
+          e.preventDefault(); 
+          showReadTheDocsSearch();
+        }
+      });
+
+      // Clone main nav into the sidebar
+      var sidebarSearch = document.querySelector('.wy-side-nav-search div[role="search"]');
+      sidebarSearch.parentNode.insertBefore(document.querySelector('.wy-main-nav').cloneNode(true), sidebarSearch);
+
+      // Prepend close button to mobile header
       var closeBtn = document.createElement("span");
       closeBtn.dataset.toggle = 'wy-nav-top';
       closeBtn.classList.add('wy-nav-top-close');