jquery: как обновить событие keyup для аккордеона

Question

У меня есть функция поиска, в которой отображаются только конкретные панели аккордеона, когда сопоставляется поисковый запрос. См. fiddle. Аккордеон расширяется (class = "in"), когда sth сопоставляется. Как только поле поиска будет очищено, я бы хотел, чтобы аккордеон вернулся к обрушению. Для этого я пытаюсь удалить добавленный класс = "in", но кажется, что он не обновляется, когда поле очищается. Есть идеи?

var $infoPanels = $('.panel-info'), 
    cachedText = []; 
$infoPanels.each(function (i, v) { 
    cachedText[i] = $(this).text().toLowerCase(); 
}); 

$('#search-criteria').on('keyup', function() { 
    var g = $(this).val().toLowerCase(); 
    if (g !== ""){ 
    $infoPanels.parentsUntil('.accordion').hide().removeClass("in"); 
    } 
    $.each(cachedText, function (i, v) { 
     if (g.length > 0 && v.indexOf(g) !== -1) { 
      $infoPanels.eq(i).show().parentsUntil('.accordion').addClass("in").show(); 
     } 
    }); 
}); 

UPDATE: я получил эту работу, добавляя еще, если посмотреть Fiddle.

Answer 1

Код проверяет, имеет ли значение search-criteria значение, а затем удаляет класс. Вместо этого он должен проверить, g == "", а затем удалить класс. Также добавьте условие else к этому условию, поэтому класс in не добавляется, когда g == "".

$('#search-criteria').on('keyup', function() { 
    var g = $(this).val().toLowerCase(); 

    if (g == ""){ //check if g is empty string 

     $infoPanels.parentsUntil('.accordion').hide().removeClass("in"); 

    }else{ //if not empty add the class 

     $.each(cachedText, function (i, v) { 
      if (g.length > 0 && v.indexOf(g) !== -1) { 
       $infoPanels.eq(i).show().parentsUntil('.accordion').addClass("in").show(); 
      } 
     }); 
    } 
}); 

Рабочий пример:http://jsfiddle.net/bsXGp/2/

Answer 2

Попробуйте

var $infoPanels = $('.panel-info'), 
    cachedText = []; 
$infoPanels.each(function (i, v) { 
    cachedText[i] = $(this).text().toLowerCase(); 
}); 

$('#search-criteria').on('keyup', function() { 
    var g = $(this).val().toLowerCase(); 
    $infoPanels.hide(); 
    $.each(cachedText, function (i, v) { 
     if (g.length > 0 && v.indexOf(g) !== -1) { 
      $infoPanels.eq(i).show(); 
     } 
    }); 
}); 

Demo: Fiddle или Fiddle