自動アコーディオン検索中

Question

アコーディオンで検索できるように検索機能を作ろうとしています。私はそれを作ることができますが、ユーザーがテキストを入力したときに自動的に拡張します。 Here is what I got

$('#box').keyup(function(){ 
    var valThis = $(this).val().toLowerCase(); 
    if(valThis == ""){ 
     $('.source > li').show();   
    } else { 
     $('.source > li').each(function(){ 
      var text = $(this).text().toLowerCase(); 
       (text.indexOf(valThis) >= 0) ? $(this).show() : $(this).hide(); 
     }); 
    }; 
}); 

だから、検索中にアコーディオンを拡張することが可能でしょうか？

Answer 1

私は実際にあなたのコードをどうしようとかわからないんだけど？またはあなたの計画は？

とにかくあなたはそれだけでそのようなつもりはない仕事検索後.source > liリスト項目を表示してみてください。まずアコーデオンを表示してからリストを表示しなければならないからです。私はliのテキストを取得するために<li class="item"><span class="closer">x</span><p>Aaron</p></li>のliマークアップに少しビットを変更あなたのコードhttps://jsfiddle.net/05e1smbs/

注意して、この

$('#box').on('keyup', function() { 
    // $('.ui-accordion-content').hide(); 
    var valThis = $(this).val(); 

    if(valThis == ""){ 
     $('.ui-accordion-content').hide(); 
    } else { 
     $('.item').each(function() { 
      var currentLiText = $(this).find('p').text().toLowerCase(), 
      showCurrentLi = currentLiText.indexOf(valThis) !== -1; 
      $(this).toggle(showCurrentLi); 
      $(this).closest('.ui-accordion-content').show(); 
     }); 

     $('.ui-accordion-content').each(function() { 
     if($(this).children('.source').children(':visible').length == 0) { 
      $(this).hide(); 
     } 
     }); 
    } 
}); 

および完全な例のように、あなたのkeyup()機能を交換してください。 https://jsfiddle.net/05e1smbs/