Suchergebnisse indexed_search dynamisch nachladen

Um die Paginierung auszublenden und die Inhalte der nächsten Seiten nachzuladen gibt es für die News-Extension einige Beispiele und sogar ein paar Plugins. Für indexed_search habe ich nichts dergleichen gefunden (Links können gerne in den Kommentaren gepostet werden). Zugegebenermaßen ist es etwas komplizierter als bei News, vor allem deswegen, weil das Template nicht so flexibel ist, aber machbar ist es schon.

Als erstes braucht man eine Seite, die Ajax-Abfragen verarbeitet, das ist für die Suche relativ einfach:

search = PAGE
search {
	typeNum = 1981
	config {
		disableAllHeaderCode = 1
		xhtml_cleaning = none
		admPanel = 0
		metaCharset = utf-8
		additionalHeaders = Content-Type:text/html;charset=utf-8
		disablePrefixComment = 1
	}
	10 < plugin.tx_indexedsearch
}

Nun braucht man einen Button, der bei Klick die Ergebnisse nachlädt. Leider finden sich nicht das komplette HTML der indexed_search im Template. Einiges wird über TypoScript generiert, manche Wrapper werden im PHP-Code einfach gesetzt. Den Button könnte man bestimmt auch mit jQuery generieren, ich habe ihn mittels stdWrap nach den Results eingefügt:

plugin.tx_indexedsearch {
	resultlist_stdWrap.wrap = |<button type="button" class="load-more expand secondary"><i class="fa fa-refresh"></i> {$labelMoreSearchResults}</button>
}

Dann muss man nur noch mit jQuery den Pagebrowser ausblenden und die Ergebnisse bei Klick auf Button nachladen. In diesem Skript sind ein paar Dinge umschön. Zum einen werden bei Indexed Search die Parameter nicht an die Links in der Paginierung angehängt. Bei Klick auf eine Seite wird mit JavaScript ein Parameter im Formular gesetzt und das Suchformular erneut abgeschickt. Im Skript unten mache ich es ähnlich. Zum anderen wird bei der Paginierung am Ende an Link zur nächsten Seiten generiert mit „>>“. Somit sind mehr Links in der Paginierung als Seiten, daher die Abfrage pagesLoaded == paginationPages - 1. Man müsste schauen, ob dieser Code-Schnipsel dadurch ggf. für einzelne Projekte angepasst werden muss.

var pagesLoaded = 0;
var paginationPages;
 
function loadMoreResults() {
	if($('.tx-indexedsearch-browsebox').eq(0).find('ul.browsebox').length < 1) {
		// Button ausblenden wenn keine Paginierung
		$('.tx-indexedsearch-res .load-more').hide();
		return;
	}
	// Paginierung ausblenden
	$('.tx-indexedsearch-browsebox ul.browsebox').hide();
 
	var button = $('.tx-indexedsearch-res .load-more');
 
	var paginationLinks = $('.tx-indexedsearch-browsebox').eq(1).find('ul.browsebox li:not([class])');
	paginationPages = paginationLinks.length;
 
	// Button Event & Ajax-Request
	button.not('.disabled').on('click', function(e){
		e.preventDefault();
 
		if(button.hasClass('disabled')){
			return;
		}
 
		if(pagesLoaded == paginationPages - 1) {
			return;
		}
 
		$('#tx_indexedsearch_pointer').val(pagesLoaded + 1);
		$('#tx_indexedsearch_freeIndexUid').val('-1');
 
		$.ajax({
			async: 'true',
			url: window.location.href + '?type=1981',
			data: $('#tx_indexedsearch').serialize(),
			type: 'POST',
			dataType: 'html',
			success: function (data) {
				pagesLoaded++;
				$data = $(data);
				var insertContent = $data.find('.result-row');
				var insertAfter = $('.tx-indexedsearch-res .result-row').last();
				insertAfter.after(insertContent);
 
				button.removeClass('disabled');
				// last page in pagination is >>, skip that
				if(pagesLoaded == paginationPages - 1) {
					button.remove();
				}
			},
			error: function (error) {
				button.removeClass('disabled');
			}
		});
	});
}
 
$(document).ready(function() {
	loadMoreResults();
});