Twitter soundtrack filter using jQuery plugin

Question

I am filling the Twitter bootstrap accordion with data from my Rails application, and I am looking to be able to filter the data. I found some nice jQuery plugins, but none of them filter data. Is it because it is not a simple list? Edit: no longer use the list. This is the code that I still have:

<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> 

And this is the plugin I use: http://anthonybush.com/projects/jquery_fast_live_filter/

Edit: I will no longer use this plugin, and I will try to write my own filter function.

I am trying to filter by the name of the elements, but I can’t figure it out and would appreciate some help. Thanks.

Answer 1

This is the jQuery I used to filter my accordion, I used this jfiddle to help 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)); 

So this uses regex to search for my accordion headers and hides them if they don't match the input. Hope this helps someone else anyway.

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(); }); 

You can search in accordion and accordion names. search is also a case free. Works in bootstrap.