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