如何搜索/筛选下拉菜单

学习如何使用CSS和JavaScript在下拉菜单中搜索项目。

过滤下拉菜单

직접 시험해 보세요

创建可点击的下拉菜单

创建一个当用户单击按钮时出现的下拉菜单。

第一步 - 添加 HTML：

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">下拉</button>
  <div id="myDropdown" class="dropdown-content">
    <input type="text" placeholder="Search.." 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正确定位下拉菜单。

第二步 - 添加 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)은 드롭다운 메뉴 내부에 맞게 스타일을 설계했습니다. 검색 아이콘을 추가하여 검색 상자 내부 왼쪽에 위치시켰습니다. 이는 실제로 검색 상자임을 나타냅니다.

세 번째 단계 - 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 드롭다운 메뉴

教程：호버링 드롭다운 메뉴를 어떻게 생성할까요?