JSでキーワードと一致するリストを絞り込む方法

こんにちは、KNAPの足立です。
今回はJSでキーワードと一致するリストを絞り込む方法についてご紹介します。
なお、選択されたキーワードが一つでも一致する場合の単一選択で実装してます。

実装はこちら

See the Pen filterKeyeords by knap_develp (@knap_develp) on CodePen.

絞り込みの処理

今回の絞り込み処理を担ってるのは下記の部分です

const filterKeywords = () => {
  const activeBtns = Array.from(document.querySelectorAll('.js-keyword_btn.is-active'));
  const selectedFruits = activeBtns.map(btn => btn.getAttribute('data-fruit'));

  if (activeBtns.length === 0) {
    keywords.forEach(keyword => {
      showKeyword(keyword);
    });
    keywordSelect.textContent = 'すべて';
  } else {
    keywordSelect.textContent = selectedFruits.join(' , ');

    keywords.forEach((keyword) => {
      const keywordFruits = keyword.getAttribute('data-fruit').split(',');
      const isVisible = selectedFruits.some(fruit => keywordFruits.includes(fruit));

      if (isVisible) {
        showKeyword(keyword);
      } else {
        hideKeyword(keyword);
      }
    });
  }
};

まずキーワード(.js-keyword_btn)がクリックされた際にis-activeが付与されている.js-keyword_btnを全て取得し、そのdata-fruit属性の値を配列に格納します。

  const activeBtns = Array.from(document.querySelectorAll('.js-keyword_btn.is-active'));
  const selectedFruits = activeBtns.map(btn => btn.getAttribute('data-fruit'));

また、現在何のキーワードが選択されているか分かるようjs-keyword_selectに選択されてるdata-fruit属性の値を.joinメソッドで配列に追加しつつtextContentでテキスト情報を更新します。もし選択されてるものが無ければすべてとしている状態にします。

  if (activeBtns.length === 0) {
    keywords.forEach(keyword => {
      showKeyword(keyword);
    });
    keywordSelect.textContent = 'すべて';
  } else {
    keywordSelect.textContent = selectedFruits.join(' , ');

そして絞り込まれる対象のリストの複数指定してあるdata-fruit属性を,で区切って配列に格納し、先程取得した選択されてる.js-keyword_btnの配列とsomeメソッドで一つ一つ突合します。someメソッドは一つでも一致するものがあればtrueを返してくれるのでその場合はリストを表示する処理を一致しない場合は非表示にする処理を書いておきます。

    keywords.forEach((keyword) => {
      const keywordFruits = keyword.getAttribute('data-fruit').split(',');
      const isVisible = selectedFruits.some(fruit => keywordFruits.includes(fruit));

      if (isVisible) {
        showKeyword(keyword);
      } else {
        hideKeyword(keyword);
      }
    });
  }

あとは.js-keyword_btnを押した時に発火するようイベントリスナーを登録すれば、絞り込み処理を行うことができます。
では本日はこのへんで〜