Nasıl oluşturulur: Arama menüsü

JavaScript kullanarak arama menüsü oluşturup bağlantıları nasıl filtreleyeceğinizi öğrenin.

Arama/Filtreleme Menüsü

Navigasyon menüsünde bağlantı nasıl aranır:

Menü
Sayfa İçeriği

Arama çubuğuna belirli bir kategori/bağlantı yazarak arama seçeneklerini "filtrele".

Bazı metin...Bazı metin...Bazı metin...Bazı metin...Bazı metin...Bazı metin...Bazı metin...Bazı metin...

Bazı diğer metin...Bazı metin...Bazı metin...Bazı metin...Bazı metin...Bazı metin...Bazı metin...Bazı metin...

Bazı metin...

Kişisel olarak deneyin

Arama menüsü oluştur

Adım 1 - HTML Ekle:

<input type="text" id="mySearch" onkeyup="myFunction()" placeholder="Ara..." title="Bir kategori yazın">
<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>

Dikkat:Bu gösterimde, şunu kullanıyoruz href="#"çünkü bağlantılı sayfalarımız yok. Gerçek bir durumda, bu belirli bir sayfaya yönlendiren gerçek URL olmalıdır.

İkinci Adım - CSS Ekle:

Arama çubuğu ve geçiş menüsünün stillerini ayarlayın:

/* Arama çubuğunun stilini ayarlayın */
#mySearch {
  width: 100%;
  font-size: 18px;
  padding: 11px;
  border: 1px solid #ddd;
}
/* Geçiş menüsünün stilini ayarlayın */
#myMenu {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
/* Geçiş bağlantılarının stilini ayarlayın */
#myMenu li a {
  padding: 12px;
  text-decoration: none;
  color: black;
  display: block
}
#myMenu li a:hover {
  background-color: #eee;
}

Üçüncü Adım - JavaScript Ekle:

<script>
function myFunction() {
  // Değişkenleri tanımlayın
  var input, filter, ul, li, a, i;
  input = document.getElementById("mySearch");
  filter = input.value.toUpperCase();
  ul = document.getElementById("myMenu");
  li = ul.getElementsByTagName("li");
  // Tüm liste öğelerini dolaşın ve arama sorgusuyla uyumsuz olanları gizleyin
  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}
</script>

Kişisel olarak deneyin

İpucu:Büyük/küçük harf duyarlılığı olan bir arama gerçekleştirmek istiyorsanız, sil toUpperCase()。

İlgili sayfalar

Rehber:Tabloyu nasıl filtrelemek

Rehber:Listeyi Nasıl Filtreleyebilirsiniz