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