İçeriğe geç

Jquery ile listeyi a-z (harf sırası) sıralama ve liste içi arama kodu

Arkadaslar bir listeniz var ve yayın tarihine göre sıralama yaptınız. fakat kullanıcılar a-z veya z-a ya sıralamak istiyor. bunun için sunucuya tekrar gidip gelmek yerine bunu daha kolay yapabilirsiniz simdi asağıda class larla sıralanmış bir listede nasıl yapabiliriz. ( ul li olan bir listeniz varsa .post-list-holder yerine ul ve childreni de li li olacak sekilde kendinize göre ayarlayın.

var mylist = $('.post-list-holder');
var listitems = mylist.children('.well.url-map-holder').get();listitems.sort(function(a, b) {
var compA = $(a).text().toUpperCase();
var compB = $(b).text().toUpperCase();
return -compA.localeCompare(compB) ;
})
$.each(listitems, function(idx, itm) { mylist.append(itm); });
// burada -compA.localeCompare(compB) yerine - kaldıralım a-z ye sıralama yapsın bunu bir function a tanımlayarak clickle cağırabilirsiniz 

//burada liste içinde arama yapacağız ben id içine birtane input text ekledim.
$("#ctl00_PlaceHolderMain_g_07710b40_9fd9_406c_ac38_99ec01e00fae").html('<input type="text" autocomplete="off" name="searchTags" id="searchTags" placeholder="Aranacak Kelime" />')


//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;
};
 

 
// 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){
 
$(".col-md-12 .well.url-map-holder").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{
Tarih:Java Script

İlk Yorumu Siz Yapın

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir