Πώς να δημιουργήσετε: Μενού Αναζήτησης

Μάθετε πώς να δημιουργήσετε ένα μενού αναζήτησης χρησιμοποιώντας JavaScript για να φιλτράρετε συνδέσμους.

Αναζήτηση/Φιλτράρισμα Μενού

Πώς να αναζητήσετε συνδέσμους στο μενού πλοήγησης:

Μενού
Περιεχόμενο Σελίδας

Παρακαλώ εισάγετε συγκεκριμένη κατηγορία/σύνδεσμο στο πλαίσιο αναζήτησης για να "φιλτράρετε" τις επιλογές αναζήτησης.

Μερικό κείμενο...Μερικό άλλο κείμενο...Μερικό κείμενο...Μερικό κείμενο...Μερικό κείμενο...Μερικό κείμενο...Μερικό κείμενο...Μερικό κείμενο...

Μερικό άλλο κείμενο...Μερικό κείμενο...Μερικό κείμενο...Μερικό κείμενο...Μερικό κείμενο...Μερικό κείμενο...Μερικό κείμενο...Μερικό κείμενο...

Μερικός κείμενο...

Δοκιμάστε το προσωπικά

Δημιουργία μενού αναζήτησης

Βήμα 1 - Προσθήκη HTML:

<input type="text" id="mySearch" onkeyup="myFunction()" placeholder="Search.." title="Type in a category">
<ul id="myMenu">
  <li><a href="#">HTML</a></li>
  <li><a href="#">CSS</a></li>
  <li><a href="#">JavaScript</a></li>
  <li><a href="#">PHP</a></li>
  <li><a href="#">Python</a></li>
  <li><a href="#">jQuery</a></li>
  <li><a href="#">SQL</a></li>
  <li><a href="#">Bootstrap</a></li>
  <li><a href="#">Node.js</a></li>
</ul>

Σημείωση:在这个演示中，我们使用 href="#"因为我们没有可链接的页面。在实际情况中，这应该是指向特定页面的真实 URL。

Δεύτερο βήμα - Προσθήκη CSS:

Ρύθμιση του στυλ του πλαίσιο αναζήτησης και του μενού πλοήγησης:

/* Ρύθμιση στυλ του πλαίσιο αναζήτησης */
#mySearch {
  width: 100%;
  font-size: 18px;
  padding: 11px;
  border: 1px solid #ddd;
}
/* Ρύθμιση στυλ του μενού πλοήγησης */
#myMenu {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
/* Ρύθμιση στυλ των σύνδεσμων πλοήγησης */
#myMenu li a {
  padding: 12px;
  text-decoration: none;
  color: black;
  display: block
}
#myMenu li a:hover {
  background-color: #eee;
}

Τρίτο βήμα - Προσθήκη JavaScript:

<script>
function myFunction() {
  // Ανακάλυψη μεταβλητών
  var input, filter, ul, li, a, i;
  input = document.getElementById("mySearch");
  filter = input.value.toUpperCase();
  ul = document.getElementById("myMenu");
  li = ul.getElementsByTagName("li");
  // Επιστροφή σε όλες τις ενοτήτες της λίστας, και κρύψτε αυτές που δεν ταιριάζουν στην αναζήτηση
  Για (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    Αν (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}
</script>

Δοκιμάστε το προσωπικά

Συμβουλή:Αν θέλετε να εκτελέσετε αναζήτηση με διαφοροποίηση γραμματικών κειμένων, διαγράψτε toUpperCase()。

Σχετικές σελίδες

Εκμάθηση:Πώς να φιλτράρειτε τη λίστα

Εκμάθηση:How to filter list