WordPress: aggiungere la funzione autocomplete al form di ricerca

Per aggiungere la funzionalità di autocomplete al form di ricerca di WordPress occorre utilizzare il modulo Autocomplete di jQuery UI. Questo modulo necessita di un output JSON generato da WordPress a seguito di una richiesta AJAX. Vediamo come implementare questa soluzione.

Come prima cosa registriamo i nostri script nel file functions.php:

function add_scripts() {
	wp_enqueue_script( 'jquery' );
	wp_enqueue_script( 'jquery-ui-autocomplete' );
	wp_register_style( 'jquery-ui-styles','http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css' );
	wp_enqueue_style( 'jquery-ui-styles' );
	wp_register_script( 'my-autocomplete', get_template_directory_uri() . '/js/my-autocomplete.js', array( 'jquery', 'jquery-ui-autocomplete' ), '1.0', false );
	wp_localize_script( 'my-autocomplete', 'MyAutocomplete', array( 'url' => admin_url( 'admin-ajax.php' ) ) );
	wp_enqueue_script( 'my-autocomplete' );
}

add_action( 'wp_enqueue_scripts', 'add_scripts' );

Lo scopo della funzione wp_localize_script() è quello di creare l'oggetto globale MyAutocomplete la cui proprietà url contiene l'URL al file AJAX principale di WordPress (lo useremo nel nostro codice JavaScript).

Ora possiamo creare la nostra action AJAX:

function my_search() {
		$term = strtolower( $_GET['term'] );
		$suggestions = array();
		
		$loop = new WP_Query( 's=' . $term );
		
		while( $loop->have_posts() ) {
			$loop->the_post();
			$suggestion = array();
			$suggestion['label'] = get_the_title();
			$suggestion['link'] = get_permalink();
			
			$suggestions[] = $suggestion;
		}
		
		wp_reset_query();
    	
    	
    	$response = json_encode( $suggestions );
    	echo $response;
    	exit();

}

add_action( 'wp_ajax_my_search', 'my_search' );
add_action( 'wp_ajax_nopriv_my_search', 'my_search' );

Abbiamo semplicemente creato un Loop di ricerca usando il parametro term che verrà passato dalla richiesta AJAX. A questo punto possiamo definire il nostro codice JavaScript nel file my-autocomplete.js:

(function( $ ) {
	$(function() {
		var url = MyAutocomplete.url + "?action=my_search";
		$( "#s" ).autocomplete({
			source: url,
			delay: 500,
			minLength: 3
		});	
	});

})( jQuery );

In questo caso presupponiamo che l'input del vostro form di ricerca abbia come ID s. Potete cambiare il selettore se il vostro form di ricerca ha una struttura diversa.