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

== 検索条件 ==
<!-- 検索ボックス -->
<html>
<form method="get" action="" id="searchForm">
  <input type="text" name="検索" placeholder="店名・住所・ジャンルなど" style="width:300px;" id="searchText" />
  <select name="ジャンル" style="margin-left:8px;" id="genre">
 <option value="">すべてのジャンル</option>
<option value="居酒屋">居酒屋</option>
<option value="ダイニングバー・バル">ダイニングバー・バル</option>
<option value="創作料理">創作料理</option>
<option value="和食">和食</option>
<option value="洋食">洋食</option>
<option value="イタリアン・フレンチ">イタリアン・フレンチ</option>
<option value="中華">中華</option>
<option value="焼肉・ホルモン">焼肉・ホルモン</option>
<option value="韓国料理">韓国料理</option>
<option value="アジア・エスニック料理">アジア・エスニック料理</option>
<option value="各国料理">各国料理</option>
<option value="カラオケ・パーティ">カラオケ・パーティ</option>
<option value="バー・カクテル">バー・カクテル</option>
<option value="ラーメン">ラーメン</option>
<option value=" お好み焼き・もんじゃ"> お好み焼き・もんじゃ</option>
<option value="カフェ・スイーツ">カフェ・スイーツ</option>
<option value="その他グルメ">その他グルメ</option>
  </select>

  <input type="submit" value="検索" />
</form>
<style>
.search-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 12px;
  max-width: 600px;
  transition: box-shadow 0.2s;
  max-height: 332px;
}
.search-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.card-header {
  margin-bottom: 5px;
}
.card-title {
  margin: 0;
}
.card-genre {
  margin: 0;
  font-size: calc(1em - 3px);
}
.img-crop {
  height: 200px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}
.img-crop p,
.img-crop > div {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: row;
  width: max-content;
}
.crop-img img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 4px;
  display: inline-block;
  margin-right: 2px;
}
.card-info {
  margin-top: 10px;
}
.card-cost, .card-address {
  margin: 0;
  font-size: calc(1em - 3px);
}
</style>
<script>
document.getElementById('searchForm').addEventListener('submit', function(e) {
  const searchText = document.getElementById('searchText');
  const genre = document.getElementById('genre');
  if (searchText.value === '') {
    searchText.removeAttribute('name'); // 空のとき name属性を削除
  }
  if (genre.value === '') {
    genre.removeAttribute('name'); // 空のとき name属性を削除
  }
});
</script>
</html>

== 検索結果 ==

<!-- 検索実行 -->
  {{#cargo_query:
      tables=飲食店情報
      |fields=飲食店情報._pageName,飲食店情報.店名,飲食店情報.画像,飲食店情報.ジャンル,飲食店情報.郵便番号,飲食店情報.住所,飲食店情報.最寄り,飲食店情報.営業時間月,飲食店情報.定休日,飲食店情報.電話番号,飲食店情報.予算昼下限,飲食店情報.予算昼上限,飲食店情報.予算夜下限,飲食店情報.予算夜上限,飲食店情報.ストリートビューURL,飲食店情報.座標
      |where=(
          (飲食店情報.店名 LIKE CONCAT('%','{{#urlget:検索}}','%') 
          OR 飲食店情報.住所 LIKE CONCAT('%','{{#urlget:検索}}','%') 
          OR 飲食店情報.ジャンル LIKE CONCAT('%','{{#urlget:検索}}','%'))
          {{#if: {{#urlget:ジャンル}} | AND 飲食店情報.ジャンル = '{{#urlget:ジャンル}}' }}
      )
      |format=template
      |template=検索結果カード
      |named args=yes
      |default=該当する店舗はありません。
    }}

__目次非表示__