Mr. Techie Web Site Tasarımı

Level 2.0 Web Site Tasarımı

Health Care Web Site Tasarımı

Animals & Pets Web Site Tasarımı

Filtreli Arama Sistemi Yapımı

Hazır Site Bileşenleri Pazar Aralık 11th, 2016
582 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

Salı Ocak 17th, 2017
1.649 Görüntülenme
Müzik Player | Audio Player

Müzik Player | Audio Player

Salı Ocak 17th, 2017
656 Görüntülenme
Vimeo Player API Demo

Vimeo Player API Demo

Salı Ocak 17th, 2017
1.388 Görüntülenme
Yuvarlak Müzik Player

Yuvarlak Müzik Player

Salı Ocak 17th, 2017
1.686 Görüntülenme
HTML ve CSS ile Dropdown Buton Yapımı

HTML ve CSS ile Dropdown Buton Yapımı

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

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

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

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

Pazar Aralık 18th, 2016
610 Görüntülenme
Filtreli Arama Tablo Yapımı

Filtreli Arama Tablo Yapımı

Cuma Aralık 16th, 2016
563 Görüntülenme
Popup Resim Galeri Modülü Yapımı

Popup Resim Galeri Modülü Yapımı

Cumartesi Aralık 10th, 2016
654 Görüntülenme
Resimleri Popup Pencerede Gösterme

Resimleri Popup Pencerede Gösterme

Cuma Aralık 9th, 2016
528 Görüntülenme
Bunlar da var!
Sosyal Park Yeri Paylaşım Uygulaması: ParkVar

Sosyal Park Yeri Paylaşım Uygulaması: ParkVar

Pazartesi Mayıs 11th, 2015
278 Görüntülenme
Reflections Web Site Tasarımı

Reflections Web Site Tasarımı

Cumartesi Nisan 29th, 2017
39 Görüntülenme
Akıllı Deve Suyu Böyle İçti [Video]

Akıllı Deve Suyu Böyle İçti [Video]

Çarşamba Aralık 9th, 2015
243 Görüntülenme
3 Saçma Ama İşe Yarar Ürünü Test Ettik

3 Saçma Ama İşe Yarar Ürünü Test Ettik

Cumartesi Nisan 9th, 2016
251 Görüntülenme
Popüler Yabancı Diziler

Popüler Yabancı Diziler

Çarşamba Ocak 13th, 2016
337 Görüntülenme
Boşuna En İyi Dost Dememişler [Video]

Boşuna En İyi Dost Dememişler [Video]

Çarşamba Şubat 3rd, 2016
260 Görüntülenme
YouTube Kids, Çocuk Hakları Savunucularıyla Karşı Karşıya

YouTube Kids, Çocuk Hakları Savunucularıyla Karşı Karşıya

Salı Nisan 7th, 2015
221 Görüntülenme