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 index.html adlı bir HTML dosyası oluşturun .
Dosyanızı bir HTML belgesinin temel yapısıyla doldurun. HTML’ye aşina değilseniz , hızlanmanıza yardımcı olmak için öğrenebileceğiniz birçok HTML kodu örneği vardır.
<!doctype html>
<html lang=”en-US”>
<head>
<title>Searchbar</title>
</head>
<body>
<div class=”container”>
<!– Webpage content goes here–>
</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 class=”container”>
<h2>Search Countries</h2>
<input id=”searchbar” autocomplete=”off” onkeyup=”search()” type=”text”n name=”search” placeholder=”What are you looking for?”>
</div>
index.html dosyanızla aynı klasörde, styles.css adlı yeni bir CSS dosyası oluşturun .
Dosyayı genel web sayfası ve arama çubuğu için stil ile doldurun:
body {
margin: 0;
padding: 0;
background-color: #f7f7f7;
}
* {
font-family: “Arial”, sans-serif;
}
.container {
padding: 100px 25%;
display: flex;
flex-direction: column;
line-height: 2rem;
font-size: 1.2em;
color: #202C39;
}
#searchbar {
padding: 15px;
border-radius: 5px;
}
input[type=text] {
-webkit-transition: width 0.15s ease-in-out;
transition: width 0.15s ease-in-out;
}
index.html’de , CSS dosyanızın bağlantısını head etiketinin içine ve başlık etiketinin altına ekleyin:
<link rel=”stylesheet” href=”styles.css”>
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.
Tarayıcıda arama çubuğu olan HTML web sitesi
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 dize, JavaScript’te kullanabileceğiniz birçok veri türünden biridir ve bir karakter dizisini temsil edebilir.
Sayfa yüklenirken JavaScript kullanarak bu listeyi dinamik olarak oluşturabilirsiniz.
index.html içinde , 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 id=”list”></div>
index.html dosyanız ve styles.css dosyanızla aynı klasörde, script.js adlı yeni bir dosya oluşturun .
script.js içinde , 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.
function loadSearchData() {
// Data to be used in the searchbar
let countries = [
‘Australia’,
‘Austria’,
‘Brazil’,
‘Canada’,
‘Denmark’,
‘Egypt’,
‘France’,
‘Germany’,
‘USA’,
‘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:
// Get the HTML element of the list
let list = document.getElementById(‘list’);
// Add each data item as an <a> tag
countries.forEach((country)=>{
let a = document.createElement(“a”);
a.innerText = country;
a.classList.add(“listItem”);
list.appendChild(a);
})
index.html öğesinin gövde etiketinde , yeni loadSearchData() işlevini çağırmak için onload olay özniteliğini ekleyin. Bu, sayfa yüklenirken verileri yükleyecektir.
<body onload=”loadSearchData()”>
index.html dosyasında, gövde etiketi sona ermeden önce , JavaScript dosyanıza bağlamak için bir komut dosyası etiketi ekleyin:
<body onload=”loadSearchData()”>
<!– Your webpage content –>
<script src=”script.js”></script>
</body>
styles.css dosyasında , açılır listeye biraz stil ekleyin:
#list {
border: 1px solid lightgrey;
border-radius: 5px;
display: block;
}
.listItem {
display: flex;
flex-direction: column;
text-decoration: none;
padding: 5px 20px;
color: black;
}
.listItem:hover {
background-color: lightgrey;
}
Arama çubuğunuzu ve mevcut arama sonuçlarının listesini görüntülemek için index.html’yi bir web tarayıcısında açın . Arama işlevi henüz çalışmıyor, ancak kullanacağı kullanıcı arayüzünü görmelisiniz:
Filtrelenmemiş arama listesiyle HTML web sitesi arama çubuğu
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.
styles.css dosyasında , listeyi varsayılan olarak gizlemek için liste stilini değiştirin:
#list {
border: 1px solid lightgrey;
border-radius: 5px;
display: none;
}
script.js’de , 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.
function search() {
// search functionality goes here
}
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:
let listContainer = document.getElementById(‘list’);
let listItems = document.getElementsByClassName(‘listItem’);
Kullanıcının arama çubuğuna girdiği girişi alın:
let input = document.getElementById(‘searchbar’).value
input = input.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.
let noResults = true;
for (i = 0; i < listItems.length; i++) {
if (!listItems[i].innerHTML.toLowerCase().includes(input) || input === “”) {
listItems[i].style.display=”none”;
continue;
}
else {
listItems[i].style.display=”flex”;
noResults = false;
}
}
Listede hiç sonuç yoksa, listeyi tamamen gizleyin:
- listContainer.style.display = noResults ? “none” : “block”;
- Bir web tarayıcısında açmak için index.html dosyasına tıklayın .
- Tarayıcıda arama çubuğu olan HTML web sitesi
- 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çlara sahip HTML arama çubuğu
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.