• SEARCH

SEARCH

チェックボックスにチェックをつけたうえで検索すると、
該当のカテゴリ記事に絞り込むことができます。

ホームページ制作のご依頼・ご相談はCOLERSへ

SNIPPETのロゴ

フォームに入力したテキストに一致するコンテンツの絞り込み機能をJavaScript(Vanilla JS)で作成する

入力テキストに一致するコンテンツを絞り込む

簡易的な絞り込み機能はライブラリを利用せずにJavaScriptで実装するのも容易になりました。

今回はフォームに入力したテキストの内容に一致するコンテンツのみ表示する
絞り込み機能についてご紹介します。

実際のコード

HTML

まずはサンプルとなるHTMLを用意します。

<input type="text" id="searchForm">
<ul>
  <li class="item" data-set="あいうえお">あいうえお</li>
  <li class="item" data-set="あいすえお">あいすえお</li>
  <li class="item" data-set="かきくけこ">かきくけこ</li>
  <li class="item" data-set="さしすせそ">さしすせそ</li>
  <li class="item" data-set="たちつてと">たちつてと</li>
  <li class="item" data-set="なにぬねの">なにぬねの</li>
  <li class="item" data-set="かきくけそ">かきくけそ</li>
</ul>

CSS

該当しないコンテンツを非表示にする機能はJavaScriptではなく、
CSSにてdisplay: noneとすることで実現します。

.hide {
  display: none;
}

JavaScript

最後にJavaScriptで入力内容に応じて一致しないコンテンツに
hideクラスを付与する処理を加えます。

const searchForm = document.querySelector('#searchForm');
const itemList = document.querySelectorAll('.item');
searchForm.addEventListener('keyup', () => {
  const keyWord = searchForm.value;
  itemList.forEach((elm) => {
    if (!keyWord || keyWord === "") {
      elm.classList.remove('hide');
      return;
    }
    const val = elm.dataset.set;
    if (val.includes(keyWord)) {
      elm.classList.remove('hide');
    } else {
      elm.classList.add('hide');
    }
  });
});

結果

以下のフォームに入力すると、その下に表示しているコンテンツのうち
入力したテキストを含む要素のみに絞り込めます。

  • あいうえお
  • あいすえお
  • かきくけこ
  • さしすせそ
  • たちつてと
  • なにぬねの
  • かきくけそ

コードの解説

それぞれのコードのポイントを解説します。

CSS

CSSはシンプルにhideクラスを付与された要素は非表示という指定のみを行っています。

JavaScriptでクラスの付与・削除をコントロールすることで、
CSSが連動してコンテンツの非表示・表示を変更しています。

CSSではdisplay:noneを指定すれば要素を非表示にすることができます。

JavaScript

テキストを入力するフォーム部分と検索対象となる要素を取得したうえで、
フォームの入力をする度にテキストを含む要素以外にhideクラスを付与する操作を行っています。

なお、要素がそのデータを持っているかというロジックは、
HTMLでカスタムデータ属性(data-◯◯ / 今回のサンプルはdata-set)をもたせているので、
そのデータの値とフォームのテキストを比較する仕様にしています。

const searchForm = document.querySelector('#searchForm');// フォームを取得
const itemList = document.querySelectorAll('.item');// 要素を取得
searchForm.addEventListener('keyup', () => {// フォームのテキストが変わる度に
  const keyWord = searchForm.value;// フォームのテキストを取得し
  itemList.forEach((elm) => {// 
    if (!keyWord || keyWord === "") {// フォームが未入力なら
      elm.classList.remove('hide');// hideクラスは削除
      return;
    }
    const val = elm.dataset.set;
    if (val.includes(keyWord)) {// フォームのテキストを要素が含むなら
      elm.classList.remove('hide');// hideクラスを削除
    } else {// 含まないなら
      elm.classList.add('hide');// hideクラスを付与
    }
  });
});

最後に

単純な構成ですが応用もききやすいと思います。
サイト内での検索という観点では利用しやすいので、是非参考にしてみてください。

AUTHOR

Yasuhiro Yamamoto

Yasuhiro Yamamoto

福岡市在住のフリーランス。
WEBデザイナー、フロントエンドエンジニア、アプリーケーションエンジニア。
デザイン・ディレクション・実装など、企画〜完成まで一貫して承っている。

RECOMMEND