WordPress: implementare la ricerca rapida con AJAX e jQuery

AJAX e jQuery ci vengono in aiuto per creare una funzione di quick search da aggiungere al nostro sito in WordPress. Aggiungendo un bottone acccanto a quello di invio del form di ricerca di WordPress diamo la possibilità agli utenti di visualizzare i risultati più significativi della ricerca senza ricaricare la pagina. Vediamo i dettagli dell'implementazione.

La ricerca di base in WordPress è implementata utilizzando la query HTTP GET s unita al termine della ricerca. L'URL di riferimento è l'URL principale del sito. Quindi una query appare come:

http://test.local/?s=termine

WordPress utilizza il file search.php solo per formattare i risultati della ricerca, non per effettuare la ricerca. Bisogna sempre tenere presente questo aspetto per evitare confusioni.

Quello che vogliamo creare è un effetto Lightbox per mostrare la finestra con i risultati della ricerca. Definiamo quindi gli stili CSS:

/* = AJAX search */

#ajax-search {
	margin: 0 0 5px 5px;
	padding: 4px 8px;
	background: #c30;
	color: #fff;
	border-radius: 4px;
	text-decoration: none;
	font-weight: bold;
}

#search-results {
	width: 500px;
	background: #fff;
	height: 500px;
	border: 10px solid #ccc;
	border-radius: 10px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -260px 0 0 -260px;
}

#search-overlay {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: #000;
}

#search-close {
	width: 24px;
	height: 24px;
	text-indent: -1000em;
	display: block;
	background: url(images/close-layer.png) no-repeat;
	position: absolute;
	top: 5px;
	right: 5px;
}

#search-contents {
	width: 80%;
	margin: 10px auto;
}

#search-contents h3 {
	font-size: 1.5em;
	margin-bottom: 0.3em;
}

#search-contents h4 {
	margin: 0;
	font-weight: bold;
	padding-bottom: 4px;
}

#search-contents div {
	padding-bottom: 5px;
}	

Inseriremo gli elementi del Lightbox tramite jQuery come figli dell'elemento body seguendo quest'ordine:

<div id="search-overlay"></div>
<div id="search-results">
	<a href="#" id="search-close">Close</a>
	<div id="search-contents">
		<!--risultati della ricerca-->
	</div>
</div>
</body>
</html>

Per funzionare al meglio è necessario inoltre che gli elementi html e body abbiano questi stili:

html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	min-height: 100%;
}

body {
	position: relative;
}

In jQuery organizzeremo il nostro codice in oggetti, definendoli all'interno del namespace di jQuery:

(function($) {


	$(function() {
	
	
		var Test = new function() {
		
		
			this.fn = new function() {
			
				this.search = {
				
				  // codice qui
				};
				
			}();
		}();
	});
})(jQuery);

Potete sostituire Test con il nome del namespace del vostro sito. fn è l'oggetto che verrà usato per implementare le azioni principali della libreria:

Test.fn.oggetto.azione();

I primi tre metodi che definiremo servono a creare la struttura del Lightbox, il suo popolamento con i contenuti della ricerca e le azioni necessarie a mostrarlo e nasconderlo:

this.search = {
					
	prepare: function() {
					    
		$('<div id="search-overlay"/>').css({
			width: $(document).width(),
			height: $(document).height(),
			opacity: 0.6
		}).appendTo('body').hide();
					
		$('<div id="search-results"/>').
		   html('<a href="#" id="search-close">Close</a>').
		   insertAfter('#search-overlay').hide();
						
		$('<a href="#" id="ajax-search">').text('Quick Search').
			insertAfter('#searchsubmit');
					
											
	},
					
					
	show: function(results) {
					
		$(results).appendTo('#search-results');
					
			$('#search-results').prev().
			show().end().show();	
					
					
	},
					
	close: function() {
					
		$('#search-close').click(function(event) {
						
			$('#search-overlay, #search-results').hide();
							
			event.preventDefault();
						
						
		});
					
	}
	
	// continua
};

A questo punto dobbiamo solo aggiungere la funzione di ricerca al bottone inserito nel form:

run: function() {
					
						$('#ajax-search').click(function(event) {
						
							var query = $('#s').val();
							var url = $('#searchform').attr('action');
							
							$.ajax({
								url: url,
								type: 'GET',
								dataType: 'html',
								data: 's=' + query,
								success: function(html) {
								
									$('#search-contents').remove();
								
									var posts = $(html).find('div.post-single');
									var contents = '<div id="search-contents"><h3>Top Search Results</h3>';
									
									posts.each(function() {
									
										var $post = $(this);
										var titleURL = $('h2', $post).html();
										var excerpt = $('div.post-excerpt', $post).html();
										
										contents += '<h4>' + titleURL + '</h4>';
										contents += '<div>' + excerpt + '</div>';
									
									
									});
									
									contents += '</div>';
								
									Test.fn.search.show(contents);
								}
							});	
						
							event.preventDefault();
						
						});
					
					
					},
					
					init: function() {
					
						this.prepare();
						this.run();
						this.close();
					
					
					}

La risposta AJAX viene gestita come un documento HTML in modo del tutto analogo a quello utilizzato per gestire documenti XML. In pratica la risposta viene gestita come un oggetto DOMDocument da cui estrarre elementi usando il metodo find().

È fondamentale in tal senso studiare la struttura HTML usata nel file search.php, perchè sarà quella la struttura restituita dalla richiesta AJAX.

Il codice viene eseguito tramite il metodo init():

Test.fn.search.init();

Potete visionare il risultato finale nel video che segue.