Ce tutoriel sera dédiée à l’utilisation de Autocomplete de EO Framework, nous allons faire une recherche d’utilisateurs dans notre base de donnée WordPress qui sera utilisable dans n’importe quel formulaire.
<div class="wpeo-autocomplete autocomplete-light" data-action="search_users">
<label class="autocomplete-label" for="autocomplete-search-users">
<i class="autocomplete-icon-before far fa-search"></i>
<input id="autocomplete-search-users" placeholder="Utilisateur" class="autocomplete-search-input" type="text" autocomplete="off" />
<span class="autocomplete-icon-after"><i class="far fa-times"></i></span>
</label>
<ul class="autocomplete-search-list"></ul>
</div>
Ligne 1: La classe wpeo-autocomplete est très important, le JS d’EO Framework écoutes cette classe pour faire fonctionner l’Autocomplete.
Ligne 1-bis: L’attribut data-action permet de configuré l’action AJAX qui sera utilisé pour récupérer les données à afficher dans la liste.
Ligne 6: La liste <ul> permet d’afficher les éléments trouvés par la requête AJAX.
Le plus important est de respecter cette structure HTML pour utiliser Autocomplete. La classe wpeo-autocomplete est obligatoire ainsi que l’attribut data-action.
Récupérer nos données et les renvoyer à l’autocomplete
Si vous ne comprenez pas le code suivant, je vous invites à lire et comprendre «
AJAX in Plugins« .
Créons un fichier ainsi qu’une méthode et l’action permettant de traité la requête AJAX en PHP.
class Handle_AutoComplete_Form {
public function __construct() {
add_action( 'wp_ajax_search_users', array( $this, 'ajax_search_users' ) );
}
public function ajax_search_users() {
$s = ! empty( $_POST['s'] ) ? sanitize_text_field( $_POST['s'] ) : '';
if ( empty( $s ) ) {
wp_send_json_error();
}
$user_query = new \WP_User_Query( array(
'role' => 'administrator',
'search' => '*' . $s . '*',
'search_columns' => array(
'user_login',
'user_nicename',
'user_email',
),
) );
$users = $user_query->results;
ob_start();
foreach ( $users as $user ) :
?>
<li data-id="<?php echo esc_attr( $user->ID ); ?>" data-result="<?php echo esc_html( $user->display_name ); ?>" class="autocomplete-result">
<?php echo get_avatar( $user->ID, 32, '', '', array( 'class' => 'autocomplete-result-image autocomplete-image-rounded' ) ); ?>
<div class="autocomplete-result-container">
<span class="autocomplete-result-title"><?php echo esc_html( $user->display_name ); ?></span>
<span class="autocomplete-result-subtitle"><?php echo esc_html( $user->user_email ); ?></span>
</div>
</li>
<?php
endforeach;
wp_send_json_success( array(
'view' => ob_get_clean(),
) );
}
}
Ligne 3: Nous utilisons l’action « wp_ajax_* » de WordPress pour attaché la requête avec l’action « search_users » à notre méthode « ajax_search_users ».
Ligne 7: Nous récupérons la valeur de $_POST[‘s’] qui correspond l’input type= »text » dans notre formulaire HTML.
Ligne 11: Nous récupérons tous les utilisateurs qui ont le role « administrator » et qui corresponde au terme de la recherche $_POST[‘s’].
Ligne 23: Nous parcourons tous les utilisateurs récupérés avec WP_User_Query et nous les mettons dans une liste à puce. Nous utilisons ob_start() pour temporiser la sortie pour pouvoir ensuite renvoyé cette vue avec wp_send_json_success().
Le paramètre « view » dans wp_send_json_success est très important, le JS de autocomplete de EO Framework utilise cette entrée pour l’afficher dans la liste des résultants que nous avons déclaré ensemble <ul class= »autocomplete-search-result »></ul>.
Tester
Faire une recherche dans le champ et vous devrez voir apparaître les utilisateurs correspondant au critère de votre recherche.
Récupérer l’ID de l’utilisateur sélectionné
jQuery( window ).on( 'click', 'li', function() {
var userID = jQuery( this ).data( 'id' )
} );
Ligne 2: La balise <li> pour chaque résultat contient l’attribut data-id, grâce à celle-ci nous récupérons l’ID.
Bravo, ce n’était pas si dur! Nous pouvons maintenant imaginer prendre l’ID de l’utilisateur sélectionné pour l’envoyer dans input caché et ensuite l’enregistrer en base de donnée.
