ｊｓコード２

document.addEventListener('DOMContentLoaded', function() {
const searchInput = document.getElementById('searchInput');
const results = document.getElementById('results');
const questionResults = document.createElement('div');
const answerResults = document.createElement('div');

questionResults.id = 'questionResults';
answerResults.id = 'answerResults';

results.appendChild(questionResults);
results.appendChild(answerResults);

searchInput.addEventListener('input', function() {
const searchText = searchInput.value.toLowerCase();
const faqSections = document.querySelectorAll('.accordion');
let hasQuestionResults = false;
let hasAnswerResults = false;

// 検索結果をクリア
questionResults.innerHTML = '';
answerResults.innerHTML = '';

// 検索テキストが空の場合は処理を終了
if (!searchText) {
  return;
}

// 各FAQセクションを検索
faqSections.forEach((section, sectionIndex) => {
  const questions = section.querySelectorAll('.accordion-open');
  const answers = section.querySelectorAll('.accordion-inner');

  // 質問を検索
  questions.forEach((question, questionIndex) => {
    if (question.textContent.toLowerCase().includes(searchText)) {
      hasQuestionResults = true;
      const resultItem = document.createElement('li');
      const link = document.createElement('a');
      const checkboxId = `check${sectionIndex * 4 + questionIndex + 1}`;
      link.href = `#${checkboxId}`;
      link.textContent = `質問から検索：${question.textContent}`;
      resultItem.appendChild(link);
      questionResults.appendChild(resultItem);

      // リンクをクリックしたときの処理
      link.addEventListener('click', function(e) {
        e.preventDefault();
        const targetCheckbox = document.getElementById(checkboxId);
        if (targetCheckbox) {
          // チェックボックスをチェックしてからスクロール
          targetCheckbox.checked = true;
          const targetPanel = targetCheckbox.nextElementSibling;
          if (targetPanel) {
            targetPanel.scrollIntoView({ behavior: 'smooth' });
            // スクロール完了後にハイライトを適用
            setTimeout(function() {
              // mark.jsを使用して検索用語をハイライト
              const instance = new Mark(targetPanel);
              instance.mark(searchText);
            }, 500); // スクロールが完了するのを待つための遅延

            // チェックボックスの状態が変更されたときの処理
            document.getElementById(checkboxId).addEventListener('change', function(e) {
              if (!this.checked) {
                // チェックボックスが未チェックの場合、ハイライトを解除
                const targetPanel = this.nextElementSibling;
                if (targetPanel) {
                  const instance = new Mark(targetPanel);
                  instance.unmark(); // ハイライトを解除
                }
              }
            });
          }
        }
      });
    }
  });

  // 回答を検索
  answers.forEach((answer, answerIndex) => {
    if (answer.textContent.toLowerCase().includes(searchText)) {
      hasAnswerResults = true;
      const resultItem = document.createElement('li');
      const link = document.createElement('a');
      const checkboxId = `check${sectionIndex * 4 + answerIndex + 1}`;
      link.href = `#${checkboxId}`;
      link.textContent = `回答から検索：${answer.textContent}`;
      resultItem.appendChild(link);
      answerResults.appendChild(resultItem);

      // リンクをクリックしたときの処理
      link.addEventListener('click', function(e) {
        e.preventDefault();
        const targetCheckbox = document.getElementById(checkboxId);
        if (targetCheckbox) {
          // チェックボックスをチェックしてからスクロール
          targetCheckbox.checked = true;
          const targetPanel = targetCheckbox.nextElementSibling.nextElementSibling; // ハイライト対象を正しく指定
          if (targetPanel) {
            targetPanel.scrollIntoView({ behavior: 'smooth' });
            // スクロール完了後にハイライトを適用
            setTimeout(function() {
              // mark.jsを使用して検索用語をハイライト
              const instance = new Mark(targetPanel);
              instance.mark(searchText);
            }, 500); // スクロールが完了するのを待つための遅延

            // チェックボックスの状態が変更されたときの処理
            document.getElementById(checkboxId).addEventListener('change', function(e) {
              if (!this.checked) {
                // チェックボックスが未チェックの場合、ハイライトを解除
                const targetPanel = this.nextElementSibling.nextElementSibling; // ハイライト対象を正しく指定
                if (targetPanel) {
                  const instance = new Mark(targetPanel);
                  instance.unmark(); // ハイライトを解除
                }
              }
            });
          }
        }
      });
    }
  });
});

// 質問と回答の検索が終わった後で結果がないかどうかをチェック
if (!hasResults) {
  results.textContent = 'No date';
}

});
});