使用jQuery插件過濾twitter引導手風琴

Question

我使用Rails應用程序的數據填充Twitter引導手風琴，我希望能夠過濾數據。我發現了一些不錯的jQuery插件，但似乎沒有過濾數據。這是因爲它不是一個簡單的列表嗎？編輯：不再使用列表。這是我的代碼至今：

<div id="descriptions"> 

    <% unless @subcategories.nil? %> 
    <form class="filterform" action="#"> 
     <input class="filterinput" type="text"> 
    </form> 

    <div id="list" class="display-subcategory"> 
     <div class="accordion" id="accordion2"> 
      <% @subcategories.each do |s| %> 
       <% unless s.description == "No description yet"%> 
       <div class="accordion-group"> 
        <div class="accordion-heading"> 
         <a class="accordion-toggle purple-text" data-toggle="collapse" data-parent="#accordion2" href="#collapse<%=s.name.gsub(/\s+/, "")%>"> 
           <h3><%= s.name %> </h3> 
         </a> 
        </div> 
        <div id="collapse<%=s.name.gsub(/\s+/, "")%>" class="accordion-body collapse out"> 
         <div class="accordion-inner"> 
          <%= s.description.html_safe %> 
         </div> 
        </div> 
       </div> 
       <% end %> 
      <% end %> 
     </div> 
     </div> 
    <% end %> 
</div> 

這是我使用的插件：http://anthonybush.com/projects/jquery_fast_live_filter/

編輯：我不再打算使用這個插件，我會嘗試寫我自己的過濾功能。

我想過濾的項目的名稱，但我不知道這一點，並希望得到一些援助。謝謝。

Answer 1

這是我用來過濾我的手風琴jQuery的，我用這個jfiddle幫助http://jsfiddle.net/U8T8p/10/：

(function($) { 

     $('.filterinput').keyup(function() { 
      var a = $(this).val(); 
      if (a.length > 0) { 
       children = ($("#accordion2").children()); 

       var containing = children.filter(function() { 
        var regex = new RegExp('\\b' + a, 'i'); 
        return regex.test($('a', this).text()); 
       }).slideDown(); 
       children.not(containing).slideUp(); 
      } else { 
       children.slideDown(); 
      } 
      return false; 
     }) 

    }(jQuery)); 

所以這個使用正則表達式來找到我的手風琴頭和隱藏他們，如果他們不匹配輸入。無論如何希望這可以幫助別人。

Answer 2

$.expr[":"].contains = $.expr.createPseudo(function(arg) { 
    return function(elem) { 
     return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0; 
    }; 
}); 
$("#searchinput").change(function() { 
    var filter = $(this).val(); 
    var list= $(".accordion .accordion-group"); 
    if(filter) { 
     $(list).find(":not(:contains(" + filter + "))").filter(".text-contrast").parent().parent().parent().hide(); 
     $(list).find(":not(:contains(" + filter + "))").filter(".accordion-inner").parent().parent().hide(); 
     $(list).find(":contains(" + filter + ")").filter(".text-contrast").parent().parent().parent().show(); 
     $(list).find(":contains(" + filter + ")").filter(".accordion-inner").parent().parent().show(); 
    } else { 
     $(list).show(); 
    } 
    return false; 
}).keyup(function() { 

    $(this).change(); 
}); 

您可以搜索手風琴內容和手風琴的標題。搜索也是免費的。在引導中工作。