Loading...
Navigation überspringen
Bitte beachte, dass sich diese Dokumentation auf die neuste Version dieser Erweiterung bezieht. Wenn eine ältere Version eingesetzt wird, kann diese abweichen. Die jeweils passende Dokumentation befindet sich im Dokumentation-Verzeichnis der Erweiterung.

JavaScript basierte Schnellsuche integrieren

Eine JavaScript basierte Schnellsuche ist schnell in einer Liste integriert. Wir wollen hier zwei Beispiele geben, wie eine solche Schnellsuche in Verwendung mit dem TYPO3 Downloadmanager aussehen könnte.

JavaScript basierte Schnellsuche für mehrere Dateisammlungen

Um eine JavaScript basierte Schnellsuche bereitzustellen, mit der man mehrere Dateisammlungen filtern kann, brauchen wir zuerst über der Downloadsliste ein Suchfeld. Dieses könnte wie folgt aussehen:

<f:layout name="Default" />
<f:section name="Main">
    <div class="downloadmanager-publicdownload">
        <f:flashMessages />
        <f:if condition="{f:count(subject: downloadFileCollections)}">
            <f:then>
                <div>
                    Search file collection <input name="downloads-quick-search"
                                                  value=""
                                                  placeholder="Produktname..."
                                                  id="downloads-quick-search">
                </div>

                ...

Als nächstes brauchen wir ein JavaScript, welches das Suchwort in den Überschriften der Dateisammlungen vergleicht und diese entsprechend sichtbar bzw. unsichtbar macht.

// Quicksearch for download file collections
jQuery(document).ready(function() {
    jQuery('#downloads-quick-search').keyup(function() {
        downloadsQuickSearchDelay(function() {
            downloadsQuickSearch();
        }, 500);
    })
});

var downloadsQuickSearchDelay = (function() {
    var timer = 0;
    return function(callback, ms) {
        clearTimeout (timer);
        timer = setTimeout(callback, ms);
    };
})();

function downloadsQuickSearch() {
    var searchField = jQuery('#downloads-quick-search');
    var searchWord = searchField.val();
    var container = searchField.closest('.tx-downloadmanager');
    if(searchWord === '') {
        jQuery('.download-collection', container).show();
    }
    else {
        jQuery.each(jQuery('.download-collection', container), function() {
            var item = jQuery(this);
            var title = jQuery('.card-title', item).text();
            if(title.toLowerCase().indexOf(searchWord.toLowerCase()) !== -1) {
                item.show();
            }
            else {
                item.hide();
            }
        })
    }
}

JavaScript basierte Schnellsuche für Dateien innerhalb einer Dateisammlung

Um eine JavaScript basierte Schnellsuche für Dateien an einer Dateisammlung bereitzustellen, fügen wir zuerst wieder ein Suchfeld ein. Diese fügen wir diesmal in das Partial DownloadManager/List/Panel.html ein.

...
<div>
    Search file: <input name="downloads-file-quick-search"
                        value=""
                        placeholder="Dateiname..."
                        data-downloads-file-quick-search="1"
                        id="downloads-file-quick-search-{downloadFileCollection.uid}">
</div>
...

Das JavaScript für die Dateisuche ähnelt dem vorherigen sehr, es müssen lediglich ein paar Selektoren angepasst werden. Für das Delay wurde hier auch die gleiche Methode verwendet - Du brauchst diese also nur einmal in Ihrem Skript.

// Quicksearch for download files in file collections
jQuery(document).ready(function() {
    jQuery('input[data-downloads-file-quick-search=\'1\']').keyup(function() {
        var field = jQuery(this);
        downloadsQuickSearchDelay(function() {
            downloadsQuickSearchFiles(field.attr('id'));
        }, 500);
    })
});

var downloadsQuickSearchDelay = (function() {
    var timer = 0;
    return function(callback, ms) {
        clearTimeout (timer);
        timer = setTimeout(callback, ms);
    };
})();

function downloadsQuickSearchFiles(field) {
    var searchField = jQuery('#' + field);
    var searchWord = searchField.val();
    var container = searchField.closest('.download-collection');
    if(searchWord === '') {
        jQuery('.download-collection-files tr', container).show();
    }
    else {
        jQuery.each(jQuery('.download-collection-files tr', container), function() {
            var item = jQuery(this);
            var filename = jQuery('.download-file-name', item).text();
            if(filename.toLowerCase().indexOf(searchWord.toLowerCase()) !== -1) {
                item.show();
            }
            else {
                item.hide();
            }
        })
    }
}

Kontaktanfrage

Du kannst uns jederzeit kontaktieren

Stop! Playing in the meantime?
Stop! Playing in the meantime?
Stop! Playing in the meantime?

Stop! Playing in the meantime?

Break the highscore

Press Start
Contact request
Screenreader label
Security question
FO2_________5W3______
__L____F____2_____IK5
1PE___CSH___EWO______
__N____E______I___5TK
EQN_________87W______