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