我正在使用我的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/
编辑:我不再使用此插件,我将尝试编写自己的过滤器功能。
我正在尝试按项目的名称进行过滤,但我无法弄清楚这一点并希望得到一些帮助。感谢。
答案 0 :(得分:5)
这是我用来过滤手风琴的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));
所以这使用正则表达式来查找我的手风琴标题,如果他们不匹配输入则隐藏它们。希望这无论如何都能帮助别人。
答案 1 :(得分:0)
$.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();
});
您可以搜索手风琴内容和手风琴标题。搜索也是无案例的。在bootstrap中工作。