Merhaba arkadaşlar bloğumun ikinci yazısında tüm yazılımcı arkadaşlara yardımcı olacak bir jquery özelliğinden bahsetmek ve örnek bir uygulama yapmak istiyorum. Paylaşacağım jquery özelliği :contains() selector olarak bilinen sayfa içindeki herhangi bir selector içinde arama yaparak bir css özelliği eklemenizi yada daha farklı bir jquery işlevi yapmanızı sağlayan hayat kurtarıcı bir özellik bana göre. Gelin bu muhteşem özelliği kullanarak basit bir menü ve menü içinde arama yapacak bir sistem hazırlayalım.
İlk olarak menümüzü ve arama kısmını basit bir şekilde yazalım. Ardından jquery kütüphanesini sayfamıza dahil edelim.
<!doctype html> <html lang="tr"> <head> <meta charset="utf-8"> <title>Bymega.com jquery sayfa içi arama</title> <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> </head> <body> <input id="searchTags" autocomplete="off" name="searchTags" type="text" placeholder="Aranacak Kelime" /> <ul id="menuFull"> <li>Anasayfa</li> <li>Müzik</li> <li>Komedi</li> <li>Haber</li> <li>Moda</li> <li>Spor</li> <li>Yaşam</li> <li>Teknoloji</li> </ul> </body> </html> |
Sıra geldi aramayı yapacak olan jquery :contains() kısmına.
$(document).ready(function () { // keyup ile inputa herhangi bir değer girilince fonksiyonu tetikliyoruz $("#searchTags").keyup(function(){ // inputa yazılan değeri alıyoruz var value = $("#searchTags").val(); // eğer input içinde değer yoksa yani boşsa tüm menüyü çıkartıyoruz if(value.length==0){ $("#menuFull li").show(); // arama yapılmışsa ilk olarak tüm menüyü gizliyoruz ve girilen değer ile eşleşen kısmı çıkarıyoruz }else{ $("#menuFull li").hide(); $("#menuFull li:contains("+value+")").show(); } }); }); |
Yukarıdaki kod menü içinde arama yaparak size sonucu getirecektir. Fakat yukarıdaki jquery kodu büyük ve küçük harf aramalarına karşı duyarlı değildir. Yani menüde Müzik şeklinde bir kısım varsa bunu müzik şeklinde ararsanız sonuç boş dönecektir. İşte bu sorunu düzeltecek kod bloğunu da sizinle paylaşıyorum.
jQuery.expr[‘:’].contains = function(a, i, m) { return jQuery(a).text().toUpperCase() .indexOf(m[3].toUpperCase()) >= 0; }; |
İşte jquery ile sayfa içinde arama yapmayı sağlayacak örneğin tüm kodları.
<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8">
<title>Bymega.com jquery sayfa içi arama</title>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
<input type="text" autocomplete="off" name="searchTags" id="searchTags" placeholder="Aranacak Kelime" />
<ul id="menuFull">
<li>Anasayfa</li>
<li>Müzik</li>
<li>Komedi</li>
<li>Haber</li>
<li>Moda</li>
<li>Spor</li>
<li>Yaşam</li>
<li>Teknoloji</li>
</ul>
<script>
//Aramalarda büyük küçük harf duyarlılığı için
jQuery.expr[‘:’].contains = function(a, i, m) {
return jQuery(a).text().toUpperCase()
.indexOf(m[3].toUpperCase()) >= 0;
};
$(document).ready(function () {
// keyup ile inputa herhangi bir değer girilince fonksiyonu tetikliyoruz
$("#searchTags").keyup(function(){
// inputa yazılan değeri alıyoruz
var value = $("#searchTags").val();
// eğer input içinde değer yoksa yani boşsa tüm menüyü çıkartıyoruz
if(value.length==0){
$("#menuFull li").show();
// arama yapılmışsa ilk olarak tüm menüyü gizliyoruz ve girilen değer ile eşleşen kısmı çıkarıyoruz
}else{
$("#menuFull li").hide();
$("#menuFull li:contains("+value+")").show();
}
});
});
</script>
</body>
</html> |
DEMO
Çınar Y. says:
2016-12-11T21:31:43+00:00
büyük İ harfi olduğunda nasıl bir çözüm önerirsiniz ?
Ersel says:
2017-03-22T21:06:29+00:00
Teşekkürler çok işime yaradı 🙂
Mustafa Sabri says:
2017-10-06T01:23:12+00:00
Büyük İ harflerini i gibi algılaması için aşağıdaki şekilde denedim, çalıştı.
jQuery.expr[‘:’].contains = function(a, i, m) {
return jQuery(a).text().replace(“İ”,”i”).toUpperCase()
.indexOf(m[3].replace(“İ”,”i”).toUpperCase()) >= 0;
};