Kendi otomatik tamamlanan arama çubuğunuzu oluşturmak sandığınızdan daha kolay.
Arama çubuğu, birçok modern web sitesinin kullandığı popüler bir kullanıcı arabirimi öğesidir. Herhangi bir türde veri içeren bir site oluşturuyorsanız, kullanıcılarınızın belirli öğeleri arayabilmesini isteyebilirsiniz.
Bir arama çubuğu oluşturmanın birçok yolu vardır. Ad veya tarih gibi birden çok filtreye dayalı olarak sonuç döndüren karmaşık arama çubukları oluşturabilirsiniz. Mevcut kitaplıklar, bir arama çubuğunu sıfırdan oluşturmadan uygulamanıza yardımcı olabilir.
Ancak, bir kullanıcının girişini bir dize listesiyle karşılaştıran, normal JavaScript kullanarak basit bir arama çubuğu da oluşturabilirsiniz.
Arama Çubuğu için Kullanıcı Arayüzü Nasıl Eklenir?
Web siteniz, kullanıcılarınızın aramak istedikleri metni girmeleri için bir giriş kutusu içermelidir. Bunu yapmanın bir yolu, bir giriş etiketi kullanmak ve onu bir arama çubuğu gibi görünecek şekilde biçimlendirmektir.
- Web sitenizi saklamak için bir klasör oluşturun. Klasörün içinde, adlı bir HTML dosyası oluşturun. index.html.
- Dosyanızı bir HTML belgesinin temel yapısıyla doldurun. HTML'ye aşina değilseniz, birçok Öğrenebileceğiniz HTML kodu örnekleri hızlanmanıza yardımcı olmak için.
<!doctype html>
<html dili="tr-US">
<KAFA>
<başlık>Arama çubuğu</title>
</head>
<vücut>
<div sınıfı="konteyner">
<!-- Web sayfası içeriği buraya gelecek-->
</div>
</body>
</html> - Konteyner sınıfı div'in içine bir giriş etiketi ekleyin. Bu, kullanıcının aramak istediği metni yazmasına izin verecektir. Ne zaman yeni bir karakter girseler, web siteniz search() işlevini çağırır. Bu işlevi daha sonraki adımlarda oluşturacaksınız.
Otomatik tamamlama özelliği, bir tarayıcının önceki arama terimlerine dayalı olarak kendi açılır menüsünü eklememesini sağlar.<div sınıfı="konteyner">
<h2>Arama Ülkeleri</h2>
<giriş kimliği="arama çubuğu" otomatik tamamlama="kapalı" onkeyup="aramak()" tür="metin"
isim="aramak" yer tutucu="Ne arıyorsun?">
</div> - Sizinle aynı klasörde index.html adlı yeni bir CSS dosyası oluşturun. stiller.css.
- Dosyayı genel web sayfası ve arama çubuğu için stil ile doldurun:
vücut {
kenar boşluğu: 0;
dolgu: 0;
arka plan rengi: #f7f7f7;
}
* {
font ailesi: "Arial", sans Serif;
}
.konteyner {
dolgu: 100 piksel %25;
ekran: esnek;
esnek yön: sütun;
satır yüksekliği: 2rem;
yazı Boyutu: 1.2em;
renk: #202C39;
}
#arama çubuğu {
dolgu: 15 piksel;
sınır yarıçapı: 5px;
}
giriş[tür=metin] {
-webkit-geçişi: Genişlik 0.15skolay giriş;
geçiş: Genişlik 0.15skolay giriş;
} - İçinde index.html, CSS dosyanızın bağlantısını head etiketinin içine ve başlık etiketinin altına ekleyin:
<bağlantı rel="stil sayfası" href="stiller.css"> - Aç index.html dosyasını bir web tarayıcısında açın ve arama çubuğunuzun kullanıcı arayüzünü görüntüleyin.
Arama Çubuğu için Liste Dizeleri Nasıl Oluşturulur
Kullanıcı arama yapmadan önce, arayabilecekleri mevcut öğelerin bir listesini oluşturmanız gerekir. Bunu bir dizi dizeyle yapabilirsiniz. Bir dizi birçok diziden biridir JavaScript'te kullanabileceğiniz veri türleri, ve bir karakter dizisini temsil edebilir.
Sayfa yüklenirken JavaScript kullanarak bu listeyi dinamik olarak oluşturabilirsiniz.
- İçeri index.html, giriş etiketinin altına bir div ekleyin. Bu div, kullanıcının aradığı şeyle eşleşen öğelerin bir listesini içeren bir açılır menü görüntüler:
<div kimliği="liste"></div> - Sizinle aynı klasörde index.html dosya ve stiller.css adlı yeni bir dosya oluşturun. komut dosyası.js.
- İçeri komut dosyası.js, loadSearchData() adlı yeni bir işlev oluşturun. İşlevin içinde, bir dize listesiyle bir dizi başlatın. Bunun küçük bir statik liste olduğunu unutmayın. Daha karmaşık bir uygulama, daha büyük veri kümelerinde aramayı hesaba katmalıdır.
işlevloadSearchData() {
// Arama çubuğunda kullanılacak veriler
izin vermek ülkeler = [
'Avustralya',
'Avusturya',
'Brezilya',
'Kanada',
'Danimarka',
'Mısır',
'Fransa',
'Almanya',
'Amerika Birleşik Devletleri',
'Vietnam'
];
} - LoadSearchData() içinde ve yeni dizinin altında, eşleşen arama öğelerini kullanıcıya gösterecek olan div öğesini alın. Div listesinin içine, listedeki her veri öğesi için bir bağlantı etiketi ekleyin:
// Listenin HTML öğesini alın
izin vermek liste = belge.getElementById('liste');
// Her bir veri öğesini bir etiket
ülkeler.her biri için((ülke)=>{
izin vermek bir = belge.createElement("a");
a.innerText = ülke;
a.classList.add("liste öğesi");
liste.appendChild (a);
}) - vücut etiketinde index.html, yeni loadSearchData() işlevini çağırmak için onload olay özniteliğini ekleyin. Bu, sayfa yüklenirken verileri yükleyecektir.
<vücut yükü ="loadSearchData()"> - İçinde index.html, gövde etiketi bitmeden, JavaScript dosyanıza bağlamak için bir komut dosyası etiketi ekleyin:
<vücut yükü ="loadSearchData()">
<!-- Web sayfanızın içeriği -->
<komut dosyası kaynağı="komut dosyası.js"></script>
</body> - İçinde stiller.css, açılır listeye biraz stil ekleyin:
#liste {
kenarlık: 1 piksel düz açık gri;
sınır yarıçapı: 5px;
Ekran bloğu;
}
.listItem {
ekran: esnek;
esnek yön: sütun;
metin süslemesi: yok;
dolgu: 5 piksel 20 piksel;
siyah renk;
}
.listItem:vurgulu {
arka plan rengi: açık gri;
} - Açık index.html arama çubuğunuzu ve mevcut arama sonuçlarının listesini görüntülemek için bir web tarayıcısında. Arama işlevi henüz çalışmıyor, ancak kullanacağı kullanıcı arayüzünü görmelisiniz:
Arama Çubuğu İçinde Eşleşen Sonuçlarla Açılır Menü Nasıl Oluşturulur
Artık bir arama çubuğunuz ve kullanıcıların araması için bir dize listeniz olduğuna göre, arama işlevini ekleyebilirsiniz. Kullanıcı arama çubuğuna yazarken, listedeki yalnızca belirli öğeler görüntülenecektir.
- İçinde stiller.css, listeyi varsayılan olarak gizlemek için liste stilini değiştirin:
#liste {
kenarlık: 1 piksel düz açık gri;
sınır yarıçapı: 5px;
görüntü yok;
} - İçinde komut dosyası.js, search() adlı yeni bir işlev oluşturun. Kullanıcı arama çubuğuna her karakter girdiğinde veya arama çubuğundan bir karakter çıkardığında programın bu işlevi çağıracağını unutmayın. Bazı uygulamaların bilgi almak için bir sunucuya gitmesi gerekir. Bu gibi durumlarda, bu uygulama kullanıcı arayüzünüzü yavaşlatabilir. Bunu dikkate almak için uygulamayı değiştirmeniz gerekebilir.
işlevaramak() {
// arama işlevi buraya gelir
} - search() işlevinin içinde, liste için HTML div öğesini alın. Ayrıca, listedeki her öğenin HTML bağlantı etiketi öğelerini de alın:
izin vermek listeKapsayıcı = belge.getElementById('liste');
izin vermek liste öğeleri = belge.getElementsByClassName('listItem'); - Kullanıcının arama çubuğuna girdiği girişi alın:
izin vermek giriş = belge.getElementById('arama çubuğu').değer
girdi = girdi.toLowerCase(); - Kullanıcının girişini listedeki her bir öğeyle karşılaştırın. Örneğin, kullanıcı "a" girerse işlev, "a"nın "Avustralya", ardından "Avusturya", "Brezilya", "Kanada" vb. içinde olup olmadığını karşılaştırır. Eşleşirse, o öğeyi listede görüntüler. Eşleşmiyorsa, o öğeyi gizleyecektir.
izin vermek sonuç yok = doğru;
için (i = 0; Ben < listItems.uzunluk; ben++) {
if (!listItems[i].innerHTML.toLowerCase().includes (giriş) || girdi "") {
listItems[i].style.display="hiçbiri";
devam etmek;
}
başka {
listItems[i].style.display="esnek";
sonuç yok = YANLIŞ;
}
} - Listede hiç sonuç yoksa, listeyi tamamen gizleyin:
listContainer.style.display = sonuç yok mu? "hiçbiri": "engellemek"; - Tıkla index.html Dosyayı bir web tarayıcısında açmak için.
- Arama çubuğuna yazmaya başlayın. Siz yazarken, sonuç listesi yalnızca eşleşen sonuçları gösterecek şekilde güncellenir.
Eşleşen Sonuçları Aramak için Arama Çubuğu Kullanma
Artık dize seçimli bir arama çubuğunu nasıl oluşturacağınızı bildiğinize göre, daha fazla işlevsellik ekleyebilirsiniz.
Örneğin, kullanıcının tıkladığı sonuca bağlı olarak farklı sayfalar açmak için bağlantı etiketlerinize bağlantılar ekleyebilirsiniz. Daha karmaşık nesneleri aramak için arama çubuğunuzu değiştirebilirsiniz. React gibi çerçevelerle çalışmak için kodu da değiştirebilirsiniz.