Blue Dream Web Site Tasarımı

Caprice Web Site Tasarımı

Codester Web Site Tasarımı

Natural Health Web Site Tasarımı

Filtreli Arama Sistemi Yapımı

  • Hazır Site Bileşenleri
  • Savaş Dersim Çelik
  • Pazar Aralık 11th, 2016
  • 689 Görüntülenme
  • HTML, CSS, Javascript
  • Responsive

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ış.

Benzer İçerikler