テンプレート:飲食店検索/script.jsのソースを表示

<html>
<script>
document.getElementById('searchForm').addEventListener('submit', function (e) {
  const searchText = document.getElementById('searchText');
  const genre = document.getElementById('genre');
  const station = document.getElementById('station');
  const budget_min = document.getElementById('budget_min');
  const budget_max = document.getElementById('budget_max');

  if (searchText.value === '') {
    searchText.removeAttribute('name'); // 空のとき name属性を削除
  }
  if (genre.value === '') {
    genre.removeAttribute('name'); // 空のとき name属性を削除
  }
  if (station.value === '') {
    station.removeAttribute('name'); // 空のとき name属性を削除
  }
  if (budget_min.value === '') {
    budget_min.removeAttribute('name'); // 空のとき name属性を削除
  }
  if (budget_max.value === '') {
    budget_max.removeAttribute('name'); // 空のとき name属性を削除
  }
});

document.addEventListener('DOMContentLoaded', function () {
  const params = new URLSearchParams(window.location.search);

  params.forEach((value, key) => {
    // input, select, checkbox, radio 全対応
    const el = document.querySelector(`[name="${key}"]`);
    if (!el) return;

    // checkbox / radio (name[] の対応含む)
    if (el.type === "checkbox" || el.type === "radio") {
      document.querySelectorAll(`[name="${key}"]`).forEach(input => {
        if (input.value === value) {
          input.checked = true;
        }
      });
    } else {
      // text / select など
      el.value = value;
    }
  });

  const clearBtn = document.querySelector('.clear-btn');
  const form = document.getElementById('searchForm');

  clearBtn.addEventListener('click', function () {

    form.reset();
  });

  // URLパラメータ取得
  var area = params.get("station");
  var category = params.get("genre");
　
  var reservable = params.get("reservable");
  var smoking = params.get("smoking");
  var tabehodai = params.get("tabehodai");
  var nomihodai = params.get("nomihodai");
  var takeout = params.get("takeout");
  var parking = params.get("parking");
  var kids = params.get("kids");
  var reserve = params.get("reserve");
  var count = document.getElementById("count");
  count = count.dataset.total.toString();

  // タイトル生成
  let title = "川西市でおすすめのグルメ情報をご紹介！ | 川西図鑑";
  // パンくず用テキスト生成
  let nav = "";

  if (area) {
    if (category) {
      title = `${area}でおすすめのおいしい${category}をご紹介！ | 川西図鑑`;
      nav = ` › ${area} × ${category}`;
    } else {
      title = `${area}でおすすめのおいしいグルメをご紹介！ | 川西図鑑`;
      nav = ` › ${area}`;
    }
  } else if (category) {
    title = `川西市でおすすめのおいしい${category}をご紹介！ | 川西図鑑`;
      nav = ` › ${category}`;
  }

  // タイトル更新
  document.title = title;
  // パンくず更新
  document.getElementById('navText2').textContent = nav;

  if (area) {
    area = "の" + area;
  } else {
    area = "";
  }

  if (category) {
    category = "の" + category;
  } else {
    category = "";
  }

  if (count) {
    count = count + "件";
  } else {
    count = "";
  }

  if (reservable) {
    reservable = "予約可能";
  } else {
    reservable = "";
  }
  if (smoking　== "non" ) {
    smoking　= "禁煙";
  } else {
    smoking　= "";
  }
  if (tabehodai) {
    tabehodai = "食べ放題あり";
  } else {
    tabehodai = "";
  }
  if (nomihodai) {
    nomihodai = "飲み放題あり";
  } else {
    nomihodai = "";
  }
  if (takeout) {
    takeout　= "テイクアウトあり";
  } else {
    takeout　= "";
  }
  if (parking) {
    parking　= "駐車場あり";
  } else {
    parking　= "";
  }
  if (kids) {
    kids = "お子様連れOK";
  } else {
    kids = "";
  }
  if (reserve) {
    reserve = "貸切可能";
  } else {
    reserve = "";
  }

  const keys = [
  reservable,
  smoking,
  tabehodai,
  nomihodai,
  takeout,
  parking,
  kids,
  reserve,
];

const valid = keys.filter(v => {
  if (!v) return false;
  if (v.trim() === "") return false;
  return true;
});

// 上から3つだけ取得
const top3 = valid.slice(0, 3);

// description に使う文字列を作成
let conditionText = "";
if (top3.length > 0) {
  conditionText = top3.join("・");
}

if (conditionText) {
  conditionText = `${conditionText}のお店を厳選して表示しています。`;
} else {
  conditionText = ``;
}

  // description生成
  let desc = `「川西図鑑」では、兵庫県川西市${area}で人気${category}のお店を ${count}掲載中。${conditionText}営業時間、アクセス、写真、地図などの詳細情報をまとめています。ランチやディナー、テイクアウトなど条件で絞り込みができ、地元でおすすめのお店が見つかります。`;

  let meta = document.querySelector("meta[name='description']");
  if (!meta) {
    meta = document.createElement("meta");
    meta.name = "description";
    document.head.appendChild(meta);
  }

  meta.content = desc;
});//# sourceURL=foobar.js
</script>
</html>