Turkcell ve Yandex, Yerli Arama Motoru ‘Yaani’ İçin Ortak Oldular

Hindistan’da Yenilenmiş Galaxy Note 7 Satılacağı İddiaları Yalanlandı

Apple, merakla beklenen yeni kampüsü Apple Park’ı Nisan’da açıyor

Microsoft, Windows 10’un ikinci büyük güncellemesinin de 2017 yılında geleceğini doğruladı

Filtreli Arama Sistemi Yapımı

Hazır Site Bileşenleri 11 Aralık 2016
437 Görüntülenme

HTML, CSS ve JavaScript Kullanarak bir arama çubuğu yapacaksınız ama bu arama alanında anlık veri gösterimi olsun istiyorsanız bunun farklı bir çok yöntemleri var tabi ki bu konumuzda sadece liste içerisinde yer alan elemanlar arasında arama yapacağız. Bunun için gerekli kodlara konu içerisinden ulaşabilirsiniz veya konu altında yer alan demo butonunu kullanarak ön izlemesine bakabilirsiniz.

filtreli-arama-sistemi-yapimi-2

HTML Kodlarımız
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Kimi aramak isterseniz..">

<ul id="myUL">
  <li><a href="#" class="header">A</a></li>
  <li><a href="#">Ahmet</a></li>
  <li><a href="#">Aslan</a></li>

  <li><a href="#" class="header">B</a></li>
  <li><a href="#">Buket</a></li>
  <li><a href="#">Büşra</a></li>

  <li><a href="#" class="header">C</a></li>
  <li><a href="#">Caner</a></li>
  <li><a href="#">Cafer</a></li>
  <li><a href="#">Cuguli</a></li>

</ul>
CSS Kodlarımız
/*
* Webinyo.COM CSS Kodlar
*/

#myInput {
    background-image: url('/css/searchicon.png'); /* Arama simgesi ekle */
    background-position: 10px 12px; /* Arama simgesini konumlandır */
    background-repeat: no-repeat; /* Simge görüntüsünü tekrar etmeyin */
    width: 100%; /* Tam genişlik */
    font-size: 16px; /* Yazıtipi boyutunu arttır */
    padding: 12px 20px 12px 40px; /* Bir miktar dolgu ekle */
    border: 1px solid #ddd; /* Gri bir kenarlık ekle */
    margin-bottom: 12px; /* Girişin altına biraz boşluk ekle */
}

#myUL {
    /* Varsayılan liste stilini kaldır */
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#myUL li a {
    border: 1px solid #ddd; /* Tüm bağlantılara bir kenarlık ekle */
    margin-top: -1px; /* Çifte sınırları önleme */
    background-color: #f6f6f6; /* Gri arka plan rengi */
    padding: 12px; /* Bir miktar dolgu ekle */
    text-decoration: none; /* Varsayılan metni altı çizili kaldır */
    font-size: 18px; /* Yazıtipi boyutunu arttır */
    color: black; /* Siyah metin rengi ekle */
    display: block; /* Tüm listeyi doldurmak için bir blok elemanı yapın */
}

#myUL li a.header {
    background-color: #e2e2e2; /* Üstbilgiler için daha koyu bir arka plan rengi ekle */
    cursor: default; /* İmleç stilini değiştir */
}

#myUL li a:hover:not(.header) {
    background-color: #eee; /* Üstbilgiler hariç, tüm bağlantılar için fareyle efekt ekleyin */
}
JavaScript Kodlarımız
<script>
/*
* Webinyo.COM JavaScript Kodları
*/
function myFunction() {
    // Değişkenleri bildirin
    var input, filter, ul, li, a, i;
    input = document.getElementById('myInput');
    filter = input.value.toUpperCase();
    ul = document.getElementById("myUL");
    li = ul.getElementsByTagName('li');

    // Tüm liste öğelerini birbirine bağlayın ve arama sorgusuyla uyuşmayanları 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>

 

Yorumlar

Henüz hiç yorum yapılmamış.

İlginizi Çekebilir
CSS only Müzik Player Elementi

CSS only Müzik Player Elementi

17 Ocak 2017
331 Görüntülenme
Müzik Player | Audio Player

Müzik Player | Audio Player

17 Ocak 2017
315 Görüntülenme
Vimeo Player API Demo

Vimeo Player API Demo

17 Ocak 2017
316 Görüntülenme
Yuvarlak Müzik Player

Yuvarlak Müzik Player

17 Ocak 2017
337 Görüntülenme
HTML ve CSS ile Dropdown Buton Yapımı

HTML ve CSS ile Dropdown Buton Yapımı

30 Aralık 2016
300 Görüntülenme
Mause Üzerine Gelince Ipucu ( Tooltip ) Sistemi Yapımı

Mause Üzerine Gelince Ipucu ( Tooltip ) Sistemi Yapımı

24 Aralık 2016
337 Görüntülenme
JavaScript İlerleme Çubuğu ( Progress Bar ) Yapımı

JavaScript İlerleme Çubuğu ( Progress Bar ) Yapımı

18 Aralık 2016
474 Görüntülenme
Filtreli Arama Tablo Yapımı

Filtreli Arama Tablo Yapımı

16 Aralık 2016
396 Görüntülenme
Popup Resim Galeri Modülü Yapımı

Popup Resim Galeri Modülü Yapımı

10 Aralık 2016
459 Görüntülenme
Resimleri Popup Pencerede Gösterme

Resimleri Popup Pencerede Gösterme

9 Aralık 2016
369 Görüntülenme
Bunlar da var!
Makyajın Gücü Daha İyi Anlatılamazdı

Makyajın Gücü Daha İyi Anlatılamazdı

25 Mayıs 2016
134 Görüntülenme
Elephone’un Yeni Yıldızı S3 Ortaya Çıktı!

Elephone’un Yeni Yıldızı S3 Ortaya Çıktı!

25 Şubat 2016
153 Görüntülenme
Yükselen Güneş Animasyonu

Yükselen Güneş Animasyonu

21 Ekim 2015
154 Görüntülenme