JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

CSSとJavaScriptを使ってドロップダウンメニュー内の項目を検索・絞り込む方法

CSSとJavaScriptを組み合わせることで、ドロップダウンメニュー内の項目をキーワードでリアルタイムに検索（絞り込み）できます。ボタンをクリックするとメニューが開き、検索フィールドに入力した文字列に一致する項目だけが表示される、実用的なUIパターンです。

実装例

以下は、ドロップダウンメニューに検索機能を実装した完全なコード例です。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
   .dropbtn {
      background-color: rgb(76, 78, 175);
      color: white;
      padding: 16px;
      font-size: 16px;
      border: none;
      cursor: pointer;
   }
   .dropbtn:hover, .dropbtn:focus {
      background-color: #4f3e8e;
   }
   .searchField {
      box-sizing: border-box;
      font-size: 16px;
      padding: 14px 20px 12px 45px;
      border: none;
      border-bottom: 1px solid #ddd;
   }
   .searchField:focus {outline: 3px solid #ddd;}
   .dropdown {
      position: relative;
      display: inline-block;
   }
   .dropdownList {
      display: none;
      position: absolute;
      background-color: #f6f6f6;
      min-width: 230px;
      overflow: auto;
      border: 1px solid #ddd;
      z-index: 1;
   }
   .dropdownList a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
   }
   .dropdown a:hover {background-color: #ddd;}
   .show {display: block;}
</style>
</head>
<body>
<h1>Search/filterText Dropdown Example</h1>
<div class="dropdown">
<button class="dropbtn" onclick="showDropList()">Dropdown</button>
<div id="myDropdown" class="dropdownList">
<input type="text" placeholder="Search.." class="searchField">
<a href="#">Cow</a>
<a href="#">Cat</a>
<a href="#">Dog</a>
<a href="#">Giraffe</a>
<a href="#">Lion</a>
<a href="#">Leopard</a>
<a href="#">Cheetah</a>
</div>
</div>
<script>
   function showDropList(){
      let dropDiv = document.querySelector('.dropdownList');
      if(dropDiv.style.display==="block"){
         dropDiv.style.display = "";
      } else {
         dropDiv.style.display = "block";
      }
   }
   document.querySelector('.searchField').addEventListener('keyup',filterDropdown);
   function filterDropdown() {
      var inputSearch, filterText, ul, li, links, i,div;
      inputSearch = document.querySelector(".searchField");
      filterText = inputSearch.value.toUpperCase();
      div = document.getElementById("myDropdown");
      links = div.getElementsByTagName("a");
      for (i = 0; i < links.length; i++) {
         txtValue = links[i].textContent || links[i].innerText;
         if (txtValue.toUpperCase().indexOf(filterText) > -1) {
            links[i].style.display = "";
         } else {
         links[i].style.display = "none";
         }
      }
   }
</script>
</body>
</html>

実行結果

上記コードをブラウザで開くと、まず次のような画面が表示されます。

CSSとJavaScriptを使ってドロップダウンメニュー内の項目を検索・絞り込む方法

「Dropdown」ボタンをクリックしてメニューを開き、検索フィールドに文字を入力すると、一致する項目だけが表示されます。例えば「LE」と入力すれば、「Giraffe」「Leopard」など該当する項目のみがリストに残ります。

CSSとJavaScriptを使ってドロップダウンメニュー内の項目を検索・絞り込む方法

コードのポイント

1. ドロップダウンの開閉処理

showDropList() 関数では、メニューの display プロパティを確認し、「block」なら非表示に戻し、それ以外なら「block」に切り替えています。これにより、ボタンをクリックするたびにメニューの開閉がトグルされます。

2. リアルタイム検索の仕組み

検索フィールドには keyup イベントリスナーが設定されており、キー入力のたびに filterDropdown() 関数が呼び出されます。この関数の処理の流れは以下のとおりです。

  • 入力値を取得し、toUpperCase() で大文字に変換して大小文字の違いを無視できるようにします。
  • メニュー内のすべての <a> 要素を取得します。
  • 各項目のテキスト内容に検索語が含まれるかどうかを indexOf() で判定します。
  • 一致する項目は表示し、一致しない項目は display: none; で非表示にします。

3. カスタマイズのヒント

項目数が多い場合は、表示件数の上限を設けたり、input イベント（IME変換対応）を使ったりすることで、より快適な検索体験を実現できます。また、日本語を扱う場合は toUpperCase() の代わりに toLowerCase() を統一して使う方法も一般的です。

  1. CSSとJavaScriptでアコーディオン（開閉パネル）を作成する方法をわかりやすく解説

    CSSとJavaScriptを組み合わせることで、クリックすると内容が開閉する「アコーディオン（折りたたみパネル）」を簡単に実装できます。本記事では、実際に動作するサンプルコードをもとに、その作成手順と仕組みを詳しく解説します。 アコーディオンの実装例 以下は、HTML・CSS・JavaScriptを使ってアコーディオンを実装した完全なサンプルコードです。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, ini

  2. CSSだけで実装！ホバーすると開くドロップダウンメニューの作り方

    CSSだけを使って、マウスホバー時に開くドロップダウンメニューを実装する方法を紹介します。JavaScriptに頼らず、:hover擬似クラスとdisplayプロパティを組み合わせることで、シンプルかつ軽量なドロップダウンメニューが作れます。実装例以下は、ボタンにカーソルを合わせるとメニューが展開されるドロップダウンメニューの完全なコード例です。<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-s