飲食店検索のソースを表示

<!-- 検索ボックス -->
<html>
<form id="store-search-form">
  <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>