Loading...
Skip navigation
Please note that this documentation is for the most recent version of this extension. It may not be relevant for older versions. Related documentation can be found in the documentation directory of the extension.

Integrate JavaScript-based quicksearch

A JavaScript-based quicksearch can quickly be integrated into a list. Here are two examples of quicksearch being used with TYPO3 download manager.

JavaScript-based quicksearch across file collections

In order to provide a JavaScript-based quicksearch that can filter file collections, we first need to put a search field above the download list as follows:

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

                ...

Next we need JavaScript that looks for the search term in the title of each file collection and shows the collection if it matches.

// 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-based quicksearch for files within a file collection

To provide a JavaScript-based quicksearch for files inside a file collection, we first insert a search field as we did before. This time we insert it into the DownloadManager/List/Panel.html partial.

...
<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>
...

The JavaScript for a file search is very similar to the previous search, just a few selectors have to be changed. The Delay uses the same method as before so you only need it once in your script.

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

Contact request

You can contact us at any time

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
UWK_________N________
__R____P____N_N___552
__9___4ZU___5FK______
__9____N______T___2WN
__7___________F______