วิธีการการค้นหา/กรองเมนูดรอปดาว

เรียนรู้วิธีการใช้ CSS และ JavaScript ในการกรองรายการในเมนูดรอปดาว

สร้างเมนูดรอปดาวที่สามารถกดได้

สร้างเมนูดรอปดาวที่ปรากฏขึ้นเมื่อผู้ใช้กดทับปุ่ม

ขั้นที่ 1 - เพิ่ม HTML:

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
    <a href="#about">About</a>
    <a href="#base">Base</a>
    <a href="#blog">Blog</a>
    <a href="#contact">Contact</a>
    <a href="#custom">Custom</a>
    <a href="#support">Support</a>
    <a href="#tools">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;}
/* 容器 
 - 用于定位下拉菜单内容 */
.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;}

การอธิบายตัวอย่าง:

เราได้ออกแบบสไตล์สำหรับปุ่มดาวน์โปป์แมนู่ค์ รวมถึงสีพื้นหลัง ระยะในรอบ และประสิทธิผลของการหลุดมาในสถานะ hover ในรูปแบบ

.dropdown เหล่ารูปแบบที่ใช้ position:relativeเพราะเราต้องการให้ข้อมูลด้านล่างตั้งอยู่ใต้ปุ่มดาวน์โปป์แมนู่ค์ (ผ่านการใช้ position:absolute การปฏิบัติงาน)

.dropdown-content เหล่ารูปแบบที่มีที่อยู่ในดาวน์โปป์แมนู่ค์ที่แท้จริง โดยเป็นสถานะซ่อนโดยเริ่มต้น และจะแสดงขึ้นเมื่อมีการหลุดมา (ดูลงไปด้านล่าง) สัญลักษณ์เรียกmin-width จะถูก設定เป็น 230px คุณสามารถแก้ไขมันเพื่อที่จะเหมาะกับความต้องการของคุณ คำเตือน: หากคุณต้องการให้ความกว้างของข้อมูลด้านล่างเหมือนปุ่มดาวน์โปป์ คุณสามารถตั้งค่า width เลือก 100% (และ overflow เลือก auto ให้สามารถใช้การเลื่อนเมื่อมีหน้าจอเล็ก)

ตัวกรอง (search box #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

ตัวเรียนรู้:จะทำได้อย่างไร: การสร้างเมนูดาลล์ที่สามารถคลิกเหนือ