enable search checkbox

assets/css/index.css

@@ -6,6 +6,6 @@
 
 #nav,
 #search, 
-#regex_mode_form {
+#search_form {
   margin-bottom: 1em;
 }

assets/js/search.js

@@ -1,5 +1,6 @@
 (function () {
   const SEARCH_ID = 'search';
+  const ENABLE_SEARCH_ID = 'enable_search';
   const REGEX_MODE_ID = 'regex_mode';
   const COUNT_ID = 'count';
   const LIST_ID = 'list';
@@ -13,13 +14,14 @@
   };
 
   const getSearchEl = () => document.getElementById(SEARCH_ID);
+  const getEnableSearchEl = () => document.getElementById(ENABLE_SEARCH_ID);
   const getRegexModeEl = () => document.getElementById(REGEX_MODE_ID);
   const getCountEl = () => document.getElementById(COUNT_ID);
   const getListEl = () => document.getElementById(LIST_ID);
 
-  const disableSearchEl = () => {
+  const disableSearchEl = placeholder => {
     getSearchEl().disabled = true;
-    getSearchEl().placeholder = 'Loading ...';
+    getSearchEl().placeholder = placeholder;
   };
 
   const enableSearchEl = () => {
@@ -28,17 +30,25 @@
       'Case-insensitive search by title, content, or publish date';
   };
 
-  const fetchJson = () => {
+  const disableRegexModeEl = () => {
+    getRegexModeEl().disabled = true;
+  };
+
+  const enableRegexModeEl = () => {
+    getRegexModeEl().disabled = false;
+  };
+
+  const fetchJsonIndex = () => {
     const startTime = performance.now();
-    disableSearchEl();
+    disableSearchEl('Loading ...');
     const url = `${window.location.origin}/index.json`;
     fetch(url)
       .then(response => response.json())
       .then(data => {
         list = data.blog;
         filteredList = data.blog;
         enableSearchEl();
-        logPerformance('fetchJson', startTime, performance.now());
+        logPerformance('fetchJsonIndex', startTime, performance.now());
       })
       .catch(error =>
         console.error(`Failed to fetch JSON index: ${error.message}`)
@@ -98,23 +108,31 @@
     oldList.replaceWith(newList);
   };
 
-  const handleEvent = () => {
-    const startTime = performance.now();
+  const handleSearchEvent = () => {
     const regexMode = getRegexModeEl().checked;
     filterList(regexMode);
     renderCount();
     renderList();
-    logPerformance('handleEvent', startTime, performance.now());
+  };
+
+  const handleEnableSearchEvent = () => {
+    if (getEnableSearchEl().checked) {
+      fetchJsonIndex();
+      enableRegexModeEl();
+    } else {
+      disableSearchEl('Disabled ...');
+      disableRegexModeEl();
+    }
   };
 
   const addEventListeners = () => {
-    getSearchEl().addEventListener('keyup', handleEvent);
-    getRegexModeEl().addEventListener('change', handleEvent);
+    getEnableSearchEl().addEventListener('change', handleEnableSearchEvent);
+    getSearchEl().addEventListener('keyup', handleSearchEvent);
+    getRegexModeEl().addEventListener('change', handleSearchEvent);
   };
 
   const main = () => {
     if (getSearchEl()) {
-      fetchJson();
       addEventListeners();
     }
   };

config.yaml

@@ -11,3 +11,7 @@ outputs:
 params:
   search: true
   search_minify: false
+
+disableKinds:
+  - taxonomy
+  - term

layouts/blog/list.html

@@ -5,12 +5,22 @@ <h1>{{ .Title }}</h1>
     id="search"
     class="form-control"
     type="text"
-    aria-label="Case-insensitive search by title, content, or publish date">
-  <div id="regex_mode_form" class="form-check">
-    <input id="regex_mode" class="form-check-input" type="checkbox">
-    <label class="form-check-label" for="regex_mode">
-      Regex mode
-    </label>
+    aria-label="Case-insensitive search by title, content, or publish date"
+    placeholder="Disabled ..."
+    disabled>
+  <div id="search_form">
+    <div class="form-check">
+      <input id="enable_search" class="form-check-input" type="checkbox">
+      <label class="form-check-label" for="enable_search">
+        Enable search
+      </label>
+    </div>
+    <div class="form-check">
+      <input id="regex_mode" class="form-check-input" type="checkbox">
+      <label class="form-check-label" for="regex_mode">
+        Regex mode
+      </label>
+    </div>
   </div>
   {{ end }}
   <p id="count">