Gewusst wie: filtern von collapsible-set mit jQuery Mobile?

Habe ich eine einfache, zusammenklappbare setzen, möchte ich die filter der einzige filter, die oben dargestellt ist der Satz. Das gewünschte Ergebnis ist zu sehen, dass nur passende Objekte meiner Suche (nicht die ganze collapsible block, in dem das Element angezeigt wird).

Bitte beraten, wie diese Aufgabe zu bewältigen...

<div data-role="content">
    <div data-role="collapsible-set">   
        <div data-role="collapsible" data-content-theme="c">
            <h3>Firs Collapsed list</h3>
            <ul data-role="listview" data-inset="false" data-theme="d">
                <li><a href="index.html">Acura</a></li>
                <li><a href="index.html">Audi</a></li>
                <li><a href="index.html">BMW</a></li>
            </ul>
        </div>
        <div data-role="collapsible" data-content-theme="c">
            <h3>Second Collapsed list</h3>
            <ul data-role="listview" data-inset="false" data-theme="d">
                <li><a href="index.html">Cadillac</a></li>
                <li><a href="index.html">Chrysler</a></li>
                <li><a href="index.html">Dodge</a></li>
            </ul>
        </div>
        <div data-role="collapsible" data-content-theme="c">
            <h3>Third Collapsed list</h3>
            <ul data-role="listview" data-inset="false" data-theme="d">
                <li><a href="index.html">Ferrari</a></li>
                <li><a href="index.html">Ford</a></li>
            </ul>
        </div>
    </div><!--/content-primary -->
</div>

InformationsquelleAutor Victor | 2012-08-13

Können Sie Ihre data-role="collapsible" Elemente innerhalb der Liste-Elemente in einem data-role="listview" element, das kann die data-filter="true" Attribut automatisch einen filter erstellen, der Suche nach input. Hier ist ein Beispiel:

    <ul data-role="listview" data-filter="true" id="outer-ul">
        <li>
            <div data-role="collapsible" data-content-theme="c">
                <h3>Firs Collapsed list</h3>
                <ul>
                    <li><a href="index.html">Acura</a></li>
                    <li><a href="index.html">Audi</a></li>
                    <li><a href="index.html">BMW</a></li>
                </ul>
            </div>
        </li>
    </ul>

Hier ist eine demo: http://jsfiddle.net/Awg8W/2/

Beachten Sie, dass es gibt einige CSS-Probleme, die Sie beschäftigen werde-mit. Einer von denen war, dass der innere data-role="listview" - Elemente erzeugt mehrere such-Eingänge. Ich versteckte alle, aber der erste mit diesem CSS:

#page .ui-listview-filter:nth-child(n+2) {
    display : none;
}

Update

Können Sie replizieren die Akkordeon-Effekt mit dieser jQuery-code:

//wait for page to initialize
$(document).on('pageinit', '#page', function () {

    //find the headings we want to watch
    $(this).find('#outer-ul').find('.ui-collapsible-heading').on('click', function () {

        //cache the parent collapsible widget
        var that = $(this).closest('.ui-collapsible')[0];

        //collapse all other collapsible widgets
        $(this).closest('ul').find('.ui-collapsible').filter(function () {

            //filter-out the collapsible widget that got clicked, so it functions
            return this !== that;
        }).trigger('collapse');

        //since we are messing around with the listview widget, let's refresh it
        $(this).closest('ul').trigger('refresh');
    });
});

Zunächst vielen Dank, aber das ist nicht genau was ich Suche. Diese code-Filterung der reduzierbaren Blöcke, für examlple wenn ich Typ "ac" in das Suchfeld ein, zwei erste Klapp-block angezeigt werden mit all den Sachen darin, und ich möchte, dass das Ergebnis nur 2 Elemente der Liste, Acura und Cadillac. Irgendwelche Ideen?
Das ist reines gold

InformationsquelleAutor Jasper

Ich weiß, diese Frage ist ein bisschen alt, aber ich Stand vor dem gleichen problem. Ich habe eine Lösung gefunden, wo es nicht nötig war zu schreiben JavaScript oder CSS. Ich hoffe, dass dies nützlich sein könnte für andere Leute, die sind mit diesem problem.
jsfiddle

Bearbeiten:
Ein update mit verschachtelten Listen

<div data-role="page" id="page">
    <div data-role="content">
        <h1>Collapsible set with search</h1>
        <div data-role="collapsible-set" data-filter="true">
            <div data-role="listview" data-inset="true" data-filter="true">
                <div data-role="collapsible">
                    <h1>Numero uno</h1>
                    <div>some text</div>
                </div>
                <div data-role="collapsible">
                    <h1>Number two</h1>
                    <div>some text</div>
                </div>
            </div>
        </div>
    </div>
</div>

InformationsquelleAutor Thijs

2

Die Frage ist ein bisschen alt, aber als ich laufen in das gleiche Problem heute, hier ist eine demo von mein workaround: http://jsfiddle.net/2Vg4z/.

So, über die JS, ich habe einfach copy/Paste den code aus dem original listview-filter und Sie ein bisschen verändert, damit es angewendet werden kann, um mehrere listviews.

Den ul aus dem Suchfeld erstellt hat 2 Attribute:
- data-x-filter eine Boolesche wie data-filter
- id, um in der Lage zu erkennen das Suchfeld
Andere ul die gefiltert werden durch dieses Suchfeld hat 1 Attribut:
- data-x-filter-id die id festgelegt werden, bevor
Um es zu verwenden, einfach kopieren/einfügen den code aus der jsfiddle von dieses pastebin!

In der demo, ich Hinzugefügt eine leere Liste, um es auf der Oberseite des zusammenklappbaren Gruppe, aber wenn die Liste nicht leer ist, wird es auch filter seiner eigenen Elemente.

Ich hoffe, es hilft.

Hinweis: diese Lösung ist nicht perfekt, aber ich wollte nur schnell. Eine bessere Lösung wäre eine "such-Feld "widget" zu vermeiden, der leeren Liste, aber es braucht ein bisschen mehr coding.

InformationsquelleAutor Newbo.O

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.