JSで検索機能を追加する

変更の合ったコードをここに貼ります。権限の関係でブランチ作成ができなかったので。```

document.addEventListener("DOMContentLoaded", (event) => {
  // kuromoji.jsの辞書を読み込む
  kuromoji
    .builder({ dicPath: "https://cdn.jsdelivr.net/npm/kuromoji@0.1.2/dict/" })
    .build((err, tokenizer) => {
      if (err) {
        console.error("Error loading kuromoji:", err);
        return;
      }

      // イベントデータを読み込む
      fetch("eventsdata.json")
        .then((response) => response.json())
        .then((events) => {
          const searchBox = document.querySelector(".searchbox");
          const resultsContainer = document.createElement("div");
          resultsContainer.classList.add("results");
          searchBox.parentNode.insertBefore(
            resultsContainer,
            searchBox.nextSibling
          );

          // 検索ボックスに入力があった時の処理
          searchBox.addEventListener("input", function () {
            const query = normalizeInput(this.value, tokenizer);
            const filteredEvents = events.filter((event) =>
              normalizeInput(event.name, tokenizer).includes(query)
            );

            // 結果を表示するコンテナをクリア
            resultsContainer.innerHTML = "";

            if (filteredEvents.length > 0) {
              filteredEvents.forEach((event) => {
                const resultItem = document.createElement("div");
                resultItem.textContent = event.name;
                resultsContainer.appendChild(resultItem);
              });
            } else {
              resultsContainer.textContent =
                "該当するイベントが見つかりません。";
            }
          });
        })
        .catch((error) => console.error("Error loading events data:", error));
    });
});

// 入力を正規化する関数
function normalizeInput(input, tokenizer) {
  let normalized = input
    .toLowerCase()
    .replace(/\s+/g, "") // 空白を削除
    .replace(/[０-９]/g, (s) => String.fromCharCode(s.charCodeAt(0) - 0xfee0)) // 全角数字を半角数字に変換
    .replace(/[Ａ-Ｚａ-ｚ]/g, (s) =>
      String.fromCharCode(s.charCodeAt(0) - 0xfee0)
    ); // 全角英字を半角英字に変換

  // 形態素解析を行い、ひらがなを漢字に変換
  const tokens = tokenizer.tokenize(normalized);
  let kanji = tokens.map((token) => token.surface_form).join("");

  return kanji;
}

eventdata.json

[
  {
    "name": "企画１",
    "time": "10:00",
    "place": "民青池",
    "description": "濡れます",
    "id": "01"
  },
  {
    "name": "企画hoge",
    "time": "16:00",
    "place": "運動場",
    "description": "運動靴必須",
    "id": "02"
  }
]

onomatopee / ryosai2024

JSで検索機能を追加する #1