Bu gün üzerinde çalıştığım bir projede dinamik olarak arama özelliği koymam gerekti.
Jquery’ nin bununla ilgili contains adında bir özelliği mevcut. Eburhan Jquery ve Seçiciler yazısında bundan bahsetmiş.
Fakat bir eksiklik vardı özellikte. Küçük harf büyük harf ayrımı yapıyordu. Mesela “Faruk” yazdığımızda içeriğinde “FAruk” geçen bir kelimeyi bulmuyordu.
Bununla ilgili bir kod buldum paylaşmak istedim. Buyrun
$.expr[':'].containsIgnoreCase = function(a,i,m){
return $(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
};
Kodu herhangi bir yere yerleştirdiğinizde ve contains yerine containsIgnoreCase yazdığınızda artık küçük ve büyük harfler duyarlı oluyor.
Demoya buradan dosyalara ise buradan ulaşabilirsiniz.
Aslına bakarsanız hazırcılığı pek sevmem fakat aynı fonksiyonu 2 kere yazarsam 3. sünü yazmak zor gelir bana hemen özel fonksiyonlar arasına atarım.
İşte onlardan birisi olan jquery focusEmpty eklentisi. Metin alanına gelindiğinde içeriğini boşaltmaya yarıyor.
Kullanımı oldukça kolay.
Sadece üzerine gelindiğinde içeriğini boşaltmak için
$(document).ready(function(){
$(”#MetinAlani”).focusEmpty();
});
Üzerine gelindiğinde içeriğini boşaltmak ve border-color değerini değiştirmek için
$(document).ready(function(){
$(”#MetinAlani”).focusEmpty({changeBorder: true});
});
Border-color değerini kendiniz ayarlamak için ise;
$(document).ready(function(){
$(”#MetinAlani”).focusEmpty({changeBorder: true ,focusBorderColor:”blue”,blurBorderColor:”red”});
});
demeniz yeterli. Hem kendimin hemde sizin zamanınızı almamak adına çok detaya inmedim. Border-type değerini öncesinde dilediğiniz gibi verebilirsiniz.
Dosyanın içinde jquery kütüphanesi, eklenti, eklentinin sıkıştırılmış hali ve örnek uygulamayı bulabileceksiniz.
Örnek uygulamaya buradan erişebilirsiniz.