Geçen gün bu blog için yaptığım arşiv sayfasında sitedeki tüm başlıkları listelemiştim, aklıma arşiv sayfasına girenlerin sayfa içerisinde listelenmiş başlıklar içerisinde arama yapabilmesi fikri geldi ve hemen jQuery’ye sarıldım ve yaptım. Tabii ki paylaşıp bu deneyimi de arşivlemek istedim.
Javascript’in yaptığı şey sayfa içerisinde belirlediğiniz bir eleman. class veya id metninde arama yapıyor ve sonuçlara bir class ekliyor diğerlerine de başka bir class ekliyor, ilk eklediği sonuç classına ayrı bir sitil ve diğer sonuç dışı elemanlara da ayrı stil verince sonuç sayfada belirginleşiyor(veya sonuç dışı olanlara display: none; da atayabilirsiniz). Gayet güzel ve kullanıcı dostu bir uygulama oldu.
Öncelikle örnek kodları aşağıda paylaşayım ardından sayfaya göre değişebilecek alanları belirtirim.
Arama giriş alanı/input:
<input
class="sayfa-ici-arama"
placeholder="Bu sayfada arayın!"
/>Jquery:
$( document ).ready(function(){
$(".sayfa-ici-arama").on("keyup", function(){
var v = $(this).val();
$(".sonuclar").removeClass("sonuclar");
$(".sonucdegil").removeClass("sonucdegil");
$(".entry-content li").each(function(){
if (v != "" && $(this).text().search(new RegExp(v,'gi')) != -1){
$(this).addClass("sonuclar");
}else if (v != "" && $(this).text().search(v)!= 1){
$(this).addClass("sonucdegil");
}
});
});
});Yukarıdaki kod “.entry-content li” elemanlarını aramak üzere yazılmış.
CSS:
/* input sitili */
.sayfa-ici-arama{
width: 100%;
font-size: 14px;
line-height: 26px;
color: #787d85;
background-color: #fcfcfc;
border: 1px solid #e0e1e1;
padding: 5px 15px;
}
/* sonuçların sitili */
.sonucdegil{
display: none;
}
.sonuclar{
background: #fff;
}
.sonuclar:hover{
background: #dedfdf;
}Yukarıdaki CSS’de sonuç olmayan elemanlar gizleniyor.
Örnek uygulama:
Bence çok mantıklı değil ama elemanları değil de sayfa içerisindeki tüm metinleri aratmak isterseniz alternatif olarak bunu(https://frontendscript.com/demo/jquery-search-text-on-page/) kullanabilirsiniz.
Kolay gelsin.