docs: fix search option in mobile view

eslint · May 23, 2022 · ee411a7 · ee411a7
1 parent 55534f1
commit ee411a7
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 19 deletions.
diff --git a/docs/src/_includes/components/nav-search.html b/docs/src/_includes/components/nav-search.html
@@ -5,7 +5,8 @@
             <svg class="search__icon" width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true" focusable="false">
                 <path d="M17.5 17.5L13.875 13.875M15.8333 9.16667C15.8333 12.8486 12.8486 15.8333 9.16667 15.8333C5.48477 15.8333 2.5 12.8486 2.5 9.16667C2.5 5.48477 5.48477 2.5 9.16667 2.5C12.8486 2.5 15.8333 5.48477 15.8333 9.16667Z" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round" />
             </svg>
-            <input type="search" id="nav-search" class="search__input">
+            <input type="search" id="navbar-search" class="search__input" autocomplete="off">
         </div>
     </label>
+    <div id="navbar-search-results"></div>
 </div>
diff --git a/docs/src/_includes/components/search.html b/docs/src/_includes/components/search.html
@@ -5,8 +5,8 @@
             <svg class="search__icon" width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true" focusable="false">
                 <path d="M17.5 17.5L13.875 13.875M15.8333 9.16667C15.8333 12.8486 12.8486 15.8333 9.16667 15.8333C5.48477 15.8333 2.5 12.8486 2.5 9.16667C2.5 5.48477 5.48477 2.5 9.16667 2.5C12.8486 2.5 15.8333 5.48477 15.8333 9.16667Z" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round" />
             </svg>
-            <input type="search" id="search" class="search__input" autocomplete="off">
+            <input type="search" id="sidebar-search" class="search__input" autocomplete="off">
         </div>
     </label>
-    <div id="search-results"></div>
+    <div id="sidebar-search-results"></div>
 </div>
diff --git a/docs/src/assets/js/search.js b/docs/src/assets/js/search.js
@@ -18,8 +18,7 @@ const client = algoliasearch('L633P0C2IR', 'bb6bbd2940351f3afc18844a6b06a6e8');
 const index = client.initIndex('eslint');
 
 // page
-const resultsElement = document.querySelector('#search-results');
-const searchInput = document.querySelector('#search');
+const searchInputs = document.querySelectorAll('input.search__input');
 
 //-----------------------------------------------------------------------------
 // Helpers
@@ -38,9 +37,10 @@ function fetchSearchResults(query) {
 
 /**
  * Removes any current search results from the display.
+ * @param {Element} resultsElement The HTML element used to display search results.
  * @returns {void}
  */
-function clearSearchResults() {
+function clearSearchResults(resultsElement) {
     while (resultsElement.firstChild) {
         resultsElement.removeChild(resultsElement.firstChild);
     }
@@ -49,11 +49,11 @@ function clearSearchResults() {
 /**
  * Displays the given search results in the page.
  * @param {Array<object>} results The search results to display.
+ * @param {Element} resultsElement The HTML element used to display search results.
  * @returns {void}
  */
-function displaySearchResults(results) {
-
-    clearSearchResults();
+function displaySearchResults(results,resultsElement) {
+    clearSearchResults(resultsElement);
 
     if (results.length) {
 
@@ -82,16 +82,21 @@ function displaySearchResults(results) {
 
 
 // listen for input changes
-searchInput.addEventListener('keyup', function (event) {
-    const query = searchInput.value;
-
-    if (query.length > 2) {
-        fetchSearchResults(query)
-            .then(displaySearchResults)
-            .catch(clearSearchResults);
-    } else {
-        clearSearchResults();
-    }
+searchInputs.forEach((searchInput) => {
+    searchInput.addEventListener('keyup', function (event) {
+        const resultsElement = document.querySelector(`#${searchInput.id}-results`);
+        const query = searchInput.value;
+
+        if (query.length > 2) {
+            fetchSearchResults(query)
+                .then(function (results) { displaySearchResults(results, resultsElement) })
+                .catch(function () {
+                    clearSearchResults(resultsElement);
+                });
+        } else {
+            clearSearchResults(resultsElement);
+        }
+    });
 });
 
     // add an event listenrer for a click on the search link