Loading...
Skip navigation

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
GJX_________7YP______
K_6____J______E___M6B
C_3___HKK___6KH______
G_L____1______7___55C
IDZ_________6YU______