どのようにしてドロップダウンメニューを検索/フィルタリングするか

CSSとJavaScriptを使用してドロップダウンメニューで項目を検索する方法を学びます。

ドロップダウンメニューをフィルタリングします

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

クリック可能なドロップダウンメニューを作成します

ユーザーがボタンをクリックしたときに表示されるドロップダウンメニューを作成します。

第1段 - HTMLを追加：

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">ドロップダウン</button>
  <div id="myDropdown" class="dropdown-content">
    <input type="text" placeholder="検索.." id="myInput" onkeyup="filterFunction()">
    <a href="#about">について</a>
    <a href="#base">ベース</a>
    <a href="#blog">ブログ</a>
    <a href="#contact">連絡先</a>
    <a href="#custom">カスタム</a>
    <a href="#support">サポート</a>
    <a href="#tools">ツール</a>
  </div>
</div>

例説明：

ドロップダウンメニューを開くために、どの要素でも使用できます。例えば<button>、<a>、<p>要素などです。

ドロップダウンメニューを作成するためには、コンテナ要素（例：<div>）を使用し、その中にドロップダウンメニューのリンクを追加します。

ボタンと別の<div>要素を<div>要素で囲むことで、CSSを使用してドロップダウンメニューを正しく配置します。

第2段 - CSSを追加：

/* ドロップダウンメニューのボタン */
.dropbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
/* マウスオーバーおよびフォーカス時のドロップダウンメニューのボタン */
.dropbtn:hover, .dropbtn:focus {
  background-color: #3e8e41;
}
/* 検索フィールド */
#myInput {
  box-sizing: border-box;
  background-image: url('searchicon.png');
  background-position: 14px 12px;
  background-repeat: no-repeat;
  font-size: 16px;
  padding: 14px 20px 12px 45px;
  border: none;
  border-bottom: 1px solid #ddd;
}
/* 検索ボックスがフォーカスを取得/クリックされた場合 */
#myInput:focus {outline: 3px solid #ddd;}
/* コンテナ <div> - ドロップダウンメニューの内容を定位するため */
.dropdown {
  position: relative;
  display: inline-block;
}
/* ドロップダウンメニューの内容（デフォルトで非表示） */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f6f6f6;
  min-width: 230px;
  border: 1px solid #ddd;
  z-index: 1;
}
/* ドロップダウンメニュー内のリンク */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* マウスオーバー時のドロップダウンメニューのリンクの色を変更する */
.dropdown-content a:hover {background-color: #f1f1f1}
/* ドロップダウンメニューを表示する（ユーザーがドロップダウンメニューのボタンをクリックした場合、JSを使用してこのクラスを .dropdown-content コンテナに追加します） */
.show {display:block;}

例説明：

ドロップダウンメニューのボタンは、背景色、内側マージン、ホバー効果など、スタイルデザインが施されています。

.dropdown クラスを使用して position:relative、これはドロップダウン内容がドロップダウンメニューのボタンのすぐ下に位置するようにするためです（以下を使用して）。 position:absolute を実現しています）。

.dropdown-content クラスが実際のドロップダウンメニューを含んでいます。デフォルトでは非表示で、ホバー時に表示されます（以下を参照）。注意、min-width が230pxに設定されています。必要に応じて変更してください。ヒント：ドロップダウンコンテンツの幅をドロップダウンメニューのボタンと同じにしたい場合は、 width を100%（および overflow autoに設定して、小画面でスクロールを有効にします）。

検索ボックス（#myInput）はスタイルデザインが施され、ドロップダウンメニュー内に適応されています。検索アイコンが検索ボックスの左側に配置されており、これは実際には検索ボックスであることを示しています。

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

/* ユーザーがボタンをクリックしたとき、ドロップダウンコンテンツの非表示と表示の切り替えを行います */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}
function filterFunction() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  div = document.getElementById("myDropdown");
  a = div.getElementsByTagName("a");
  for (i = 0; i < a.length; i++) {
    txtValue = a[i].textContent || a[i].innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      a[i].style.display = "";
    } else {
      a[i].style.display = "none";
    }
  }
}

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

関連ページ

チュートリアル：CSSドロップダウンメニュー

チュートリアル：実現方法：ホバードロップダウンメニューを作成する