如何搜索/筛选下拉菜单

第二步 - 添加 CSS：

/* 下拉菜单按钮 */
.dropbtn {
  χρώμα περιβάλλοντος: #04AA6D;
  χρώμα: λευκό;
  padding: 16px;
  μέγεθος γραμματοσειράς: 16px;
  περιβάλλοντος: none;
  σύνδεσμος ποντικιού: pointer;
}
/* Κουμπί μενού αναδυόμενου όταν αναβοσβήνει ή αποκτά εστίαση */
.dropbtn:hover, .dropbtn:focus {
  χρώμα περιβάλλοντος: #3e8e41;
}
/* Πεδίο αναζήτησης */
#myInput {
  παραμέτροι κουτίου: border-box;
  εικόνα περιβάλλοντος: url('searchicon.png');
  θέση περιβάλλοντος: 14px 12px;
  αναπαραγωγή περιβάλλοντος: no-repeat;
  μέγεθος γραμματοσειράς: 16px;
  padding: 14px 20px 12px 45px;
  περιβάλλοντος: none;
  περιβάλλοντος πύλης: 1px solid #ddd;
}
/* Όταν το πλαίσιο αναζήτησης αποκτά εστίαση ή γίνεται κλικ */
#myInput:focus {κεραία: 3px solid #ddd;}
/* Θυρίδα <div> - Χρησιμοποιείται για το τοποθέτημα του περιεχομένου του μενού αναδυόμενου */
.dropdown {
  θέση: relative;
  display: inline-block;
}
/* Περιεχόμενο μενού αναδυόμενου (προεπιλεγόμενα είναι κρυμμένο) */
.dropdown-content {
  display: none;
  θέση: αbsolute;
  χρώμα περιβάλλοντος: #f6f6f6;
  ελάχιστη πλάτος: 230px;
  περιβάλλοντος πύλης: 1px solid #ddd;
  z-index: 1;
}
/* Σύνδεσμοι στο μενού αναδυόμενου */
.dropdown-content a {
  χρώμα: μαύρο;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* Αλλαγή χρώματος του συνδέσμου όταν ο ποντίκος αναβοσβήνει στο μενού αναδυόμενου */
.dropdown-content a:hover {χρώμα περιβάλλοντος: #f1f1f1}
/* Εμφάνιση μενού αναδυόμενου (όταν ο χρήστης κάνει κλικ στο κουμπί μενού αναδυόμενου, χρησιμοποιήστε το JS για να προσθέσετε αυτό το κλάσμα στην θυρίδα .dropdown-content) */
.show {display:block;}

Παράδειγμα διήγησης:

έχουμε σχεδιάσει το κουμπί του μενού αναπτυσσόμενου, συμπεριλαμβανομένων του χρώματος του φόντου, του περιθωρίου, του εφέ πτήσης κ.λπ.

.dropdown η τάξη χρησιμοποιεί position:relativeαυτό είναι επειδή θέλουμε το περιεχόμενο του αναπτυσσόμενου να βρίσκεται ακριβώς κάτω από το κουμπί του αναπτυσσόμενου μενού (χρησιμοποιώντας position:absolute είναι).

.dropdown-content ο τύπος περιλαμβάνει το πραγματικό μενού αναπτυσσόμενου. Μη προεπιλεγόμενα, είναι κρυμμένο και εμφανίζεται όταν είναι στην επαφή (βλέπε παρακάτω). Σημείωση:min-width θα πρέπει να είναι 230px. Μπορείτε να το προσαρμόσετε ανάλογα με τις ανάγκες σας. Σuggestion: Αν θέλετε η πλάτος του περιεχομένου του αναπτυσσόμενου να είναι ίσο με το κουμπί του αναπτυσσόμενου μενού, τότε μπορείτε να το κάνετε width θέστε στο 100%（και overflow Όταν ο διάδρομος είναι σε αυτόματα, ενεργοποιείται η σειρά αναγνώρισης)

Η εύρηση του κουτιού (#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";
    }
  }
}