refs #23 検索仮実装

hmatsu47 · Dec 20, 2021 · b0956d4 · b0956d4
1 parent 85eb6bb
commit b0956d4
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 4 deletions.
diff --git a/content/search/_index.ja.md b/content/search/_index.ja.md
@@ -0,0 +1,36 @@
+---
+title: "検索"
+draft: false
+---
+<input id = "query" onkeyup="search(this.value)" size="30" autocomplete="off" autofocus placeholder="検索キーワードを入れてください" />
+
+<script>
+    // 検索
+    function search(query) {
+        $(".card").each(function(i, elem) {
+            var question = $(elem).find("span").text().toLowerCase();
+            var answer = $(elem).find(".card-body").text().toLowerCase();
+            if (query == "" || (question.indexOf(query) == -1 && answer.indexOf(query) == -1)) {
+                $(elem).css("display", "none");
+            } else {
+                $(elem).css("display", "block");
+            }
+        })
+    }
+    // ハッシュフラグメントの値で検索を実行
+    function searchWithHash() {
+        const hash = decodeURI(location.hash.substring(1));
+        search(hash);
+        // 必要があれば input 要素の値を更新
+        const queryElem = document.getElementById('query');
+        if (queryElem.value !== hash) {
+        queryElem.value = hash;
+        }
+    }
+    // ハッシュフラグメント付きの URL でページを開いたときに検索
+    window.addEventListener('DOMContentLoaded', searchWithHash);
+    // ページ表示後にハッシュフラグメントが変化したら検索
+    window.addEventListener('hashchange', searchWithHash);
+</script>
+
+{{< result >}}
diff --git a/layouts/partials/banner.html b/layouts/partials/banner.html
@@ -4,8 +4,29 @@
 		<div class="col-lg-8 text-center mx-auto">
 			<h1 class="text-white mb-3">{{ .Site.Params.banner.title | markdownify }}</h1>
 			<p class="text-white mb-4">{{ .Site.Params.banner.subtitle | markdownify }}</p>
-			<!-- <div class="position-relative">
-				<input id="search" class="form-control" placeholder="{{ .Site.Params.banner.placeholder }}">
+			<div class="position-relative">
+				<form>
+					<input id="searchKeyword" type="search" size="30" style="margin-top: 16px;">
+					<input id="searchButton" type="submit" value="検索">
+				</form>
+
+				<script>
+					const SEARCH_URL = '/vaccinecert-faq/search/';
+
+					window.addEventListener('DOMContentLoaded', () => {
+						const searchButton = document.getElementById('searchButton');
+						const searchKeyword = document.getElementById('searchKeyword');
+
+						// 検索ボタンのクリックで検索ページへジャンプ
+						searchButton.addEventListener('click', e => {
+							e.preventDefault();  // Prevent default form's behavior
+							const query = searchKeyword.value;
+							const url = query ? SEARCH_URL + '#' + query : SEARCH_URL;
+							location.href = url;
+						});
+					});
+				</script>
+				<!-- <input id="search" class="form-control" placeholder="{{ .Site.Params.banner.placeholder }}">
 				<i class="ti-search search-icon"></i> -->
 				<!-- Javascript -->
 				<!-- {{ $currentNode := . }}
@@ -31,8 +52,8 @@ <h1 class="text-white mb-3">{{ .Site.Params.banner.title | markdownify }}</h1>
 						.appendTo( ul );
 					};
 					});
-				</script>
-			</div> -->
+				</script> -->
+			</div>
 		</div>
 	</div>
 </div>

diff --git a/layouts/shortcodes/result.html b/layouts/shortcodes/result.html
@@ -0,0 +1,20 @@
+{{ $_hugo_config := `{ "version": 1 }` }}
+{{ range $faq := (where $.Site.Data.faq.faq "カテゴリ名" "!=" "") }}
+<div class="card mb-4 rounded-0 shadow border-0" style="display: none;">
+  <div class="card-header rounded-0 bg-white border p-0 border-0">
+    <a class="card-link h4 d-flex tex-dark mb-0 py-3 px-4 justify-content-between" data-toggle="collapse"
+      href="#{{ $faq.質問 | sha1 }}">
+      <span>{{ $faq.質問 }}</span> <i class="ti-plus text-primary text-right"></i>
+    </a>
+  </div>
+  <div id="{{ $faq.質問 | sha1 }}" class="collapse" data-parent="#accordion">
+    <div class="card-body font-secondary text-color pt-0" style="white-space:pre-wrap; margin-bottom: 0px;">{{ $faq.回答 }}</div>
+    <div class="card-footer rounded-0 bg-white border p-0 border-0" style="text-align: right; margin-bottom: 0px; margin-right: 20px;">
+      {{ if eq (len $faq.更新日) 8 }}
+        最終更新日：{{ slicestr $faq.更新日 0 4 }}年{{ slicestr $faq.更新日 4 6 | strings.TrimLeft "0" }}月{{ slicestr $faq.更新日 6 | strings.TrimLeft "0" }}日&nbsp;
+      {{ end}}
+    </div>
+  </div>
+  {{ .Inner }}
+</div>
+{{ end }}