1 files changed, 41 insertions, 16 deletions

diff --git a/ref/searcher.js b/ref/searcher.js
index fc65604e..f6064506 100644
--- a/ref/searcher.js
+++ b/ref/searcher.js
@@ -22,6 +22,7 @@ window.search = window.search || {};
     }
 
     const search_wrap = document.getElementById('search-wrapper'),
+        searchbar_outer = document.getElementById('searchbar-outer'),
         searchbar = document.getElementById('searchbar'),
         searchresults = document.getElementById('searchresults'),
         searchresults_outer = document.getElementById('searchresults-outer'),
@@ -262,6 +263,18 @@ window.search = window.search || {};
         doc_urls = config.doc_urls;
         searchindex = elasticlunr.Index.load(config.index);
 
+        searchbar_outer.classList.remove('searching');
+
+        searchbar.focus();
+
+        const searchterm = searchbar.value.trim();
+        if (searchterm !== '') {
+            searchbar.classList.add('active');
+            doSearch(searchterm);
+        }
+    }
+
+    function initSearchInteractions(config) {
         // Set up events
         searchicon.addEventListener('click', () => {
             searchIconClickHandler();
@@ -288,6 +301,8 @@ window.search = window.search || {};
         config.hasFocus = hasFocus;
     }
 
+    initSearchInteractions(window.search);
+
     function unfocusSearchbar() {
         // hacky, but just focusing a div only works once
         const tmp = document.createElement('input');
@@ -401,8 +416,28 @@ window.search = window.search || {};
         }
     }
 
+    function loadSearchScript(url, id) {
+        if (document.getElementById(id)) {
+            return;
+        }
+        searchbar_outer.classList.add('searching');
+
+        const script = document.createElement('script');
+        script.src = url;
+        script.id = id;
+        script.onload = () => init(window.search);
+        script.onerror = error => {
+            console.error(`Failed to load \`${url}\`: ${error}`);
+        };
+        document.head.append(script);
+    }
+
     function showSearch(yes) {
         if (yes) {
+            loadSearchScript(
+                window.path_to_searchindex_js ||
+                path_to_root + 'searchindex.js',
+                'search-index');
             search_wrap.classList.remove('hidden');
             searchicon.setAttribute('aria-expanded', 'true');
         } else {
@@ -485,14 +520,14 @@ window.search = window.search || {};
         // Don't search the same twice
         if (current_searchterm === searchterm) {
             return;
-        } else {
-            current_searchterm = searchterm;
         }
-
+        searchbar_outer.classList.add('searching');
         if (searchindex === null) {
             return;
         }
 
+        current_searchterm = searchterm;
+
         // Do the actual search
         const results = searchindex.search(searchterm, search_options);
         const resultcount = Math.min(results.length, results_options.limit_results);
@@ -511,19 +546,9 @@ window.search = window.search || {};
 
         // Display results
         showResults(true);
+        searchbar_outer.classList.remove('searching');
     }
 
-    function loadScript(url, id) {
-        const script = document.createElement('script');
-        script.src = url;
-        script.id = id;
-        script.onload = () => init(window.search);
-        script.onerror = error => {
-            console.error(`Failed to load \`${url}\`: ${error}`);
-        };
-        document.head.append(script);
-    }
-
-    loadScript(path_to_root + 'searchindex.js', 'search-index');
-
+    // Exported functions
+    search.hasFocus = hasFocus;
 })(window.search);