リストをフィルタリング/検索する方法

JavaScriptを使用してフィルタリングリストを作成する方法を学習

検索リストを作成

ステップ1 - HTMLを追加：

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="名前を検索">
<ul id="myUL">
  <li><a href="#">Adele</a></li>
  <li><a href="#">Agnes</a></li>
  <li><a href="#">Billy</a></li>
  <li><a href="#">Bob</a></li>
  <li><a href="#">Calvin</a></li>
  <li><a href="#">Christina</a></li>
  <li><a href="#">Cindy</a></li>
</ul>

注意：このデモでは、リンク先のページがないため、href="#"を使用しています。実際のアプリケーションでは、特定のページの実際のURLにリンクするべきです。

ステップ2 - CSSを追加：

入力要素とリストのスタイルを設定：

#myInput {
  background-image: url('/css/searchicon.png'); /* 入力フィールドに検索アイコンを追加 */
  background-position: 10px 12px; /* 検索アイコンの位置を設定 */
  background-repeat: no-repeat; /* アイコン画像を繰り返さない */
  width: 100%; /* 全幅 */
  font-size: 16px; /* 字体サイズを増加 */
  padding: 12px 20px 12px 40px; /* 内余白を追加 */
  border: 1px solid #ddd; /* 灰色の枠を追加 */
  margin-bottom: 12px; /* 入力フィールドの下にスペースを追加 */
}
#myUL {
  /* 前景色のリストスタイルを削除 */
  list-style-type: none;
  padding: 0;
  margin: 0;
}
#myUL li a {
  border: 1px solid #ddd; /* すべてのリンクにボーダーを追加します */
  margin-top: -1px; /* 双方のボーダーを防ぎます */
  background-color: #f6f6f6; /* 灰色の背景色を追加します */
  padding: 12px; /* 内余白を追加します */
  text-decoration: none; /* デフォルトのテキスト下線を削除します */
  font-size: 18px; /* 字体サイズを増やします */
  color: black; /* 黒いテキスト色を追加します */
  display: block; /* ブロック要素にすることでリスト全体を埋めます */
}
#myUL li a:hover:not(.header) {
  background-color: #eee; /* すべてのリンク（タイトルを除く）にホバーエフェクトを追加します */
}

第3ステップ - JavaScriptを追加します：

<script>
function myFunction() {
  // 変数を宣言します
  var input, filter, ul, li, a, i, txtValue;
  input = document.getElementById('myInput');
  filter = input.value.toUpperCase();
  ul = document.getElementById("myUL");
  li = ul.getElementsByTagName('li');
  // 全てのリストアイテムを巡回し、検索クエリに一致しないアイテムを非表示にします
  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    txtValue = a.textContent || a.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}
</script>

自分で試してみてください

ヒント：大文字区別の検索を実行するには、toUpperCase()を削除してください。

関連ページ

チュートリアル：実現方法：テーブルのフィルタリング/検索