「飲食店検索」の版間の差分

← 古い編集新しい編集 →

ビジュアルウィキテキスト

@@ 1行目: / 1行目: @@
-== 店舗検索 ==
 <!-- 検索ボックス -->
 <html>
-<form method="get" action="">
+<form id="store-search-form">
-   <input type="text" name="検索" placeholder="店名・住所・ジャンルで検索" style="width:300px;" />
+   <input type="text" id="store-search-input" placeholder="店名・住所・ジャンルで検索" style="width:300px;" />
    <input type="submit" value="検索" />
 </form>
+<div id="search-results">
+  <!-- 検索結果がここに表示される -->
+</div>
+<script>
+document.addEventListener('DOMContentLoaded', () => {
+  const form = document.getElementById('store-search-form');
+  const input = document.getElementById('store-search-input');
+  const resultsDiv = document.getElementById('search-results');
+  // URLパラメータに?検索=xxxがあればフォームにセット
+  const urlParams = new URLSearchParams(window.location.search);
+  const searchVal = urlParams.get('検索');
+  if(searchVal) {
+    input.value = decodeURIComponent(searchVal);
+    performSearch(input.value);
+  }
+  // フォーム送信時
+  form.addEventListener('submit', (e) => {
+    e.preventDefault();
+    const query = input.value.trim();
+    // URLを書き換える（ページ遷移させずブックマーク可能）
+    const newUrl = window.location.pathname + '?検索=' + encodeURIComponent(query);
+    window.history.replaceState({}, '', newUrl);
+    performSearch(query);
+  });
+  // 検索実行
+  function performSearch(query) {
+    let cargoQuery = `
+{{#cargo_query:
+tables=店舗情報
+|fields=店名,住所,ジャンル,画像,営業時間,定休日
+|where=(店名 LIKE '%${query}%' OR 住所 LIKE '%${query}%' OR ジャンル LIKE '%${query}%')
+|format=template
+|template=検索結果カード
+|named args=yes
+|default=該当する店舗はありません。
+}}
+`;
+    resultsDiv.innerHTML = cargoQuery;
+  }
+});
+</script>
 </html>
-{{#urlget:検索}}
-<!-- 検索実行 -->
-{{#if: {{#urlget:検索}}}
-  | {{#cargo_query:
-      tables=店舗情報
-      |fields=店舗情報.店名,店舗情報.画像,店舗情報.ジャンル,店舗情報.住所,店舗情報.営業時間,店舗情報.定休日
-      |where=(
-          店舗情報.店名 LIKE CONCAT('%','{{#urlget:検索}}','%')
-          OR 店舗情報.住所 LIKE CONCAT('%','{{#urlget:検索}}','%')
-          OR 店舗情報.ジャンル LIKE CONCAT('%','{{#urlget:検索}}','%')
-      )
-      |format=template
-      |template=検索結果カード
-      |named args=yes
-      |default=該当する店舗はありません。
-    }}
-}}

2025年10月27日 (月) 11:24時点における版