4

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/

編集：私はもうこのプラグインを使用するつもりはなく、独自のフィルター関数を書こうとしています。

アイテムの名前でフィルタリングしようとしていますが、これがわからないので、助けていただければ幸いです。ありがとう。

4

2 に答える 2

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

したがって、これは正規表現を使用してアコーディオンヘッダーを検索し、入力と一致しない場合は非表示にします。これがとにかく他の誰かを助けることを願っています。

于 2012-10-16T11:12:24.207 に答える
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();
});

アコーディオンの内容とタイトルを検索できます。検索もケースフリーです。ブートストラップで動作します。

于 2013-10-10T12:35:24.520 に答える