Türkiye Drone Ligi başlıyor

Artık Youtube’un da okulu var

Youtube Videolarını Arkadaşlarınızla Birlikte Canlı İzleyin!

28. Yılını Kutlayan WWW.’nin Yaratıcısından Ciddi Uyarı!

Filtreli Arama Sistemi Yapımı

Hazır Site Bileşenleri 11 Aralık 2016
509 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
544 Görüntülenme
Müzik Player | Audio Player

Müzik Player | Audio Player

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

Vimeo Player API Demo

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

Yuvarlak Müzik Player

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

HTML ve CSS ile Dropdown Buton Yapımı

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

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

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

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

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

Filtreli Arama Tablo Yapımı

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

Popup Resim Galeri Modülü Yapımı

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

Resimleri Popup Pencerede Gösterme

9 Aralık 2016
436 Görüntülenme