Cami Halısı Avrupada Lider Firma Gülseven Halı

Arçelik Güvenilir Servis Hizmetleri

Arçelik Buzdolabı Servisi

WordPress Eklentiye ait Klasör Dizin Adresi Öğrenebileceğiniz Kodlar

Filtreli Arama Sistemi Yapımı

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

Müzik Player | Audio Player

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

Vimeo Player API Demo

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

Yuvarlak Müzik Player

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

HTML ve CSS ile Dropdown Buton Yapımı

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

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

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

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

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

Filtreli Arama Tablo Yapımı

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

Popup Resim Galeri Modülü Yapımı

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

Resimleri Popup Pencerede Gösterme

9 Aralık 2016
308 Görüntülenme
Bunlar da var!
YOK BÖYLE ŞAKA :))))

YOK BÖYLE ŞAKA :))))

11 Mayıs 2016
155 Görüntülenme
Bulunca Almak İsteyeceğiniz 40 Fincan

Bulunca Almak İsteyeceğiniz 40 Fincan

26 Nisan 2016
131 Görüntülenme
Disrupt SF 2015 Battlefieldde finale kalan girişimler

Disrupt SF 2015 Battlefieldde finale kalan girişimler

24 Eylül 2015
102 Görüntülenme
iOS 10 ne zaman çıkacak ?

iOS 10 ne zaman çıkacak ?

22 Ocak 2016
125 Görüntülenme
Apple Watch’un iOS Uygulaması Göründü

Apple Watch’un iOS Uygulaması Göründü

14 Mart 2015
129 Görüntülenme