Nasıl Yapılır - Arama Menüsü
JavaScript ile bağlantıları filtrelemek için bir arama menüsünün nasıl oluşturulacağını öğrenin.
Arama/Filtre Menüsü
Bir gezinme menüsünde bağlantılar nasıl aranır:
Sayfa içeriği
Arama seçeneklerini "filtrelemek" için arama çubuğuna belirli bir kategori/bağlantı yazmaya başlayın.
Biraz metin..Biraz metin..Biraz metin..Biraz metin..Biraz metin..Biraz metin..Biraz metin..Biraz metin..
Başka bir metin..Biraz metin..Biraz metin..Biraz metin..Biraz metin..Biraz metin..Biraz metin..Biraz metin..
Bazı metin..
Arama Menüsü Oluştur
Adım 1) HTML'yi ekleyin:
Örnek
<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>
Not: Bağlantı verecek bir sayfamız olmadığı için bu demoda href="#" kullanıyoruz. Gerçek hayatta bu, belirli bir sayfanın gerçek URL'si olmalıdır.
Adım 2) CSS'yi ekleyin:
Arama kutusuna ve gezinme menüsüne stil verin:
Örnek
/* Style the search box */
#mySearch {
width: 100%;
font-size: 18px;
padding: 11px;
border: 1px solid #ddd;
}
/* Style the navigation
menu */
#myMenu {
list-style-type: none;
padding: 0;
margin: 0;
}
/* Style the navigation links */
#myMenu li a {
padding: 12px;
text-decoration: none;
color: black;
display: block
}
#myMenu li a:hover {
background-color: #eee;
}
Adım 3) JavaScript'i ekleyin:
Örnek
<script>
function myFunction() {
// Declare variables
var input, filter,
ul, li, a, i;
input = document.getElementById("mySearch");
filter = input.value.toUpperCase();
ul =
document.getElementById("myMenu");
li =
ul.getElementsByTagName("li");
// Loop through all
list items, and hide those who don't match the search query
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>
İpucu: Büyük /küçük harfe duyarlı bir arama yapmak istiyorsanız toUpperCase() öğesini kaldırın .
İpucu: Ayrıca Tabloları Filtreleme 'ye bakın .
İpucu: Ayrıca Listeler Nasıl Filtrelenir 'e bakın .