WordPress: implementare la ricerca rapida con AJAX e jQuery
Implementare una funzionalità di quick search (ricerca rapida) utilizzando jQuery e AJAX in WordPress.
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:
|
1 |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
/* = 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:
|
1 2 3 4 5 6 7 8 9 |
<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:
|
1 2 3 4 5 6 7 8 9 10 11 |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
(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:
|
1 |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
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():
|
1 |
Test.fn.search.init(); |
Potete visionare il risultato finale nel video che segue.
Nessun commento. Aggiungine uno!
I commenti sono chiusi.