Créer un champ de recherche de fonctionnalités ultra-performant pour votre extension WordPress

par Julio Potier 21. avril 2026 Guides

Si votre extension grandi bien et a gagné des dizaines de réglages ces dernières années, il y a de fortes chances que les personnes utilisant votre produit puissent se perdre un peu. On ne veut pas qu’elles passent 10 minutes à fouiller dans vos onglets. L’objectif est clair : leur offrir une recherche instantanée, intelligente et qui pardonne les fautes de frappe en bonus.

Nous allons voir ensemble comment cloner le système de recherche mis en place dans SecuPress v2.6 sortie le 16 Janvier 2026. C’est propre, c’est rapide, et c’est surtout indispensable pour l’UX d’un plugin « pro ». Sinon vous ne seriez pas là, n’est-ce pas ?

Étape 1 : Le Markup — Simple, accessible et extensible

On ne balance pas un <input> au pif en haut de page en espérant que quiconque s’en sorte. Pour un moteur de recherche digne de ce nom, il faut respecter 3 règles fondamentales et je dis ça alors que je ne suis ni dev front, ni pro en UX, c’est juste ma logique, n’hésitez pas à me donner votre avis là-dessus, si on peut encore faire mieux ça serait top.

L’accessibilité : Le placeholder ne remplace jamais un label. Utilisez impérativement label.screen-reader-text. Les lecteurs d’écran vous remercieront.
Feedback de chargement : Un loader est obligatoire. Il doit être masqué par défaut (un petit .hidden ou display: none) et activé seulement quand la requête tourne.
Conteneur de résultats : Prévoyez une liste <ul> dédiée pour injecter vos résultats dynamiquement.

Enveloppez ensuite votre bloc dans une classe hide-if-no-js. Si le JavaScript est HS ou désactivé, le champ disparaît proprement au lieu de rester là, inutile et frustrant. C’est ça, le progressive enhancement. Et non on ne va pas gérer ce champ en NO-JS.

<div class="secupress-module-search-wrapper hide-if-no-js">
	<label for="secupress-module-search" class="screen-reader-text"><?php _e( 'Search', 'secupress' ); ?></label>
	<span class="dashicons dashicons-search secupress-search-icon" aria-hidden="true"></span>
	<input type="search" id="secupress-module-search" name="secupress-module-search" class="secupress-module-search" placeholder="<?php esc_attr_e( 'Search…', 'secupress' ); ?>" />
	<span class="spinner secupress-inline-spinner" style="float: none; margin: 0;"></span>
	<ul id="secupress-module-search-results" class="secupress-module-search-results" style="display: none;"></ul>
</div>

Étape 2 : Chargement et Sécurité — Nonce et versioning

Pour que votre moteur ne devienne pas une passoire, on injecte les données proprement via PHP. Voici ma règle d’or pour votre wp_enqueue_scripts :

Ciblez vos écrans : N’allez pas charger ce script sur toutes les pages de l’admin. Utilisez $hook_suffix pour limiter l’exécution uniquement à la page de réglages de votre extension, personne n’aime quand tout est inclus partout je le sais…
Passez les bons paramètres : Utilisez wp_localize_script pour transmettre ces 2 éléments :
1. Le nonce pour valider l’action AJAX.
2. La version de votre plugin (votre constante VERSION).

Pourquoi la version ? C’est la clé de votre cache ! Ha oui car on y met du cache !! Si vous mettez à jour votre plugin mais que le localStorage garde l’ancienne structure des menus, tout va casser. Si la version change, on vide le cache. Simple, net, efficace.

elseif ( SECUPRESS_PLUGIN_SLUG . '_page_' . SECUPRESS_PLUGIN_SLUG . '_modules' === $hook_suffix ) {
	// CSS.
	wp_enqueue_style( 'secupress-modules-css',  SECUPRESS_ADMIN_CSS_URL . 'secupress-modules' . $suffix . '.css', array( 'secupress-common-css' ), $version );

	// JS.
	wp_enqueue_script( 'secupress-modules-js',  SECUPRESS_ADMIN_JS_URL . 'secupress-modules' . $suffix . '.js', array( 'secupress-common-js' ), $version, true );

	// ...
	wp_localize_script( 'secupress-modules-js', 'SecuPressi18nModules', array(
		// ...
		// Module Search.
		'searchNonce'          => wp_create_nonce( 'secupress_search' ),
		'version'              => SECUPRESS_VERSION,
		// ...
	) );
}

Étape 3 : Le JavaScript — Performance et cache intelligent

C’est ici que la magie opère. Votre handler d’input doit être une machine huilée et optimisée :

Le filtre des 2 caractères : En dessous de 2 caractères, on ignore la requête. Chercher « a » ou « s » n’a aucun sens et sature le serveur pour rien.
Debounce (300ms) : On ne lance pas une requête à chaque touche pressée. On attend que l’utilisateur fasse une micro-pause. 300ms, c’est le « sweet spot » comme dises les… heu je sais pas.
L’AbortController : Si l’utilisateur tape vite, plusieurs requêtes peuvent se chevaucher. Utilisez AbortController (ou xhr.abort()) pour couper les jambes aux requêtes obsolètes. Ça évite l’effet de « yoyo » sur l’affichage des résultats, vous détestez ça aussi non ?
LocalStorage & LRU : On stocke les 10 (à vous de voir) dernières recherches dans le navigateur (structure {version, order, results}). Si l’utilisateur tape un mot déjà cherché, le résultat est instantané et ça, ça fait super plaisir. Surtout qu’il y a de fortes chances qu’on cherche souvent la même chose !
Cache du « zéro résultat » : Si une recherche ne donne rien, on le met aussi en cache. Si l’utilisateur insiste, on n’interroge pas le serveur pour lui redire la même chose.

( function() {
	var $searchWrapper = $( '.secupress-module-search-wrapper' ),
		$searchInput = $( '#secupress-module-search' ),
		$resultsList = $( '#secupress-module-search-results' ),
		$spinner = $searchWrapper.find( '.spinner' ),
		searchTimeout = null,
		currentRequest = null;
	var cache_key = 'secupress_search_cache';
	var cache_version = SecuPressi18nModules.version || '0';
	var cache_data = null;

	if ( ! $searchInput.length ) {
		return;
	}

	function secupress_load_search_cache() {
		if ( ! window.localStorage ) {
			return null;
		}
		try {
			var stored = window.localStorage.getItem( cache_key );
			if ( ! stored ) {
				return { version: cache_version, order: [], results: {} };
			}
			var parsed = JSON.parse( stored );
			if ( ! parsed || parsed.version !== cache_version ) {
				return { version: cache_version, order: [], results: {} };
			}
			if ( ! parsed.order || ! parsed.results ) {
				return { version: cache_version, order: [], results: {} };
			}
			return parsed;
		} catch ( e ) {
			return { version: cache_version, order: [], results: {} };
		}
	}

	// ...
	$searchInput.on( 'input', function() {
		var searchValue = $( this ).val().trim();
		var search_key = function() {
			var normalized = searchValue.toLowerCase();
			return normalized;
		}();

		if ( searchTimeout ) {
			clearTimeout( searchTimeout );
			searchTimeout = null;
		}

		if ( currentRequest && currentRequest.state() === 'pending' ) {
			currentRequest.abort();
			currentRequest = null;
		}

		if ( searchValue.length < 2 ) {
			$spinner.removeClass( 'secupress-inline-spinner-active' );
			$resultsList.hide().empty();
			return;
		}

		if ( cache_data && cache_data.results && cache_data.results[ search_key ] ) {
			var cached_results = cache_data.results[ search_key ];
			var cached_html = '';
			cached_results.forEach( function( item ) {
				cached_html += '<li><a href="' + ( item.url || '#' ) + '">' + ( item.title || '' ) + '</a></li>';
			} );
			$resultsList.html( cached_html ).show();
			return;
		}

		searchTimeout = setTimeout( function() {
			// ...
			$spinner.addClass( 'secupress-inline-spinner-active' );

			var params = {
				action: 'secupress_search',
				secupress_module_search: finalSearchValue,
				secupress_search_nonce: SecuPressi18nModules.searchNonce
			};

			currentRequest = $.post( ajaxurl, params )
				.done( function( response ) {
					// ...
					if ( response && response.success && response.data && response.data.length > 0 ) {
						// ... render + persist LRU (10 entrées) ...
					} else {
						// ... persist aussi les “0 résultat” ...
					}
				} )
				.fail( function( jqXHR ) {
					$spinner.removeClass( 'secupress-inline-spinner-active' );
					if ( jqXHR.statusText !== 'abort' ) {
						$resultsList.hide().empty();
					}
				} )
				.always( function() {
					currentRequest = null;
				} );
		}, 300 );
	} );

	$( document ).on( 'click', function( e ) {
		if ( ! $searchWrapper.is( e.target ) && $searchWrapper.has( e.target ).length === 0 ) {
			$resultsList.hide();
		}
	} );
} )();

Étape 4 : Le Serveur (PHP) — Algorithme de scoring et tri

Côté serveur, notre action wp_ajax_secupress_search doit être plus maligne qu’un simple strpos(). On veut de la pertinence.

Sécurité systématique : Vérifiez les capability du compte qui lance la requête et son nonce. Pas de bras, pas de chocolat.
Parcours des sous-modules : Ne vous limitez pas à une liste statique. Votre boucle doit parcourir dynamiquement les fonctionnalités et sous-modules de votre extension pour être toujours à jour.
L’algorithme de scoring :
- Match exact : Score maximum.
- Préfixe : « fi » matchera mieux « Firewall » que « Wifi ». C’est plus naturel.
- Levenshtein : On calcule la distance entre les mots pour tolérer les fautes de frappe (ex: « firwal » trouvera tout de même « firewall »).
Le seuil de bruit : On ne renvoie rien en dessous d’un seuil de 0.7. Si c’est trop éloigné, c’est que ça n’a rien à voir. On veut de la qualité, pas de la quantité.

Renvoyez enfin un payload JSON minimal (titre et URL). Plus c’est léger, plus ça va vite. C’est tout !

add_action( 'wp_ajax_secupress_search', 'secupress_search_ajax_cb' );
function secupress_search_ajax_cb() {
	secupress_check_user_capability();
	secupress_check_admin_referer( 'secupress_search', 'secupress_search_nonce' );

	$search_query = isset( $_POST['secupress_module_search'] ) ? sanitize_text_field( wp_unslash( trim( $_POST['secupress_module_search'] ) ) ) : '';

	if ( empty( $search_query ) || strlen( $search_query ) < 2 ) {
		wp_send_json_success( [] );
	}

	$results        = [];
	$results_by_key = [];
	$modules        = secupress_get_modules();
	$search_query   = function_exists( 'mb_strtolower' ) ? mb_strtolower( $search_query ) : strtolower( $search_query );

	foreach ( $modules as $module_key => $module_data ) {
		// ...
		foreach ( $module_data['submodules'] as $submodule_key => $submodule_title ) {
			$clean_title_lower = function_exists( 'mb_strtolower' ) ? mb_strtolower( $clean_title ) : strtolower( $clean_title );
			$title_words       = preg_split( '/\s+/', $clean_title_lower, -1, PREG_SPLIT_NO_EMPTY );
			$best_score        = 0;
			$has_exact_match   = false;

			foreach ( $title_words as $title_word ) {
				$has_word_match    = false !== ( function_exists( 'mb_strpos' ) ? mb_strpos( $title_word, $search_query ) : strpos( $title_word, $search_query ) );
				$levenshtein_score = function_exists( 'secupress_levenshtein' ) ? secupress_levenshtein( $title_word, $search_query ) : 0;

				// prefix_score si préfixe commun >= 3
				// ...
				$word_score = $has_word_match ? 1 : max( $levenshtein_score, $prefix_score );
				if ( $word_score > $best_score ) {
					$best_score = $word_score;
				}
			}

			if ( $best_score >= 0.7 ) {
				$url        = secupress_admin_url( 'modules', $module_key ) . '#' . $submodule_key;
				// ...
			}
		}
	}

	// Tri: exact match d’abord, puis score.
	// Réponse: title + url uniquement.
	wp_send_json_success( $results );
}

Et la fonction levenshtein (elle existe dans PHP ! La mienne fait le calcul en plus) :

function secupress_levenshtein( $str1, $str2 ) {
    $distance = levenshtein( $str1, $str2 );
    $maxlen   = max( strlen( $str1 ), strlen( $str2 ) );
    return 1 - ( $distance / $maxlen );
}