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.
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ı.