Comment personnaliser le champ de liste déroulante moderne

Souhaitez-vous personnaliser le champ Liste déroulante moderne dans WPForms ? Lorsque vous utilisez ce champ, vous permettez à vos utilisateurs de taper dans une zone de recherche et d'afficher les résultats en fonction des caractères saisis. Avec un petit extrait de code PHP, vous pouvez contrôler le nombre de résultats affichés à mesure que les touches sont enfoncées. Dans ce tutoriel, nous vous guiderons à travers chaque étape pour personnaliser le nombre de résultats affichés.

Création de votre formulaire

Tout d'abord, vous devrez créer votre formulaire et ajouter vos champs, en incluant au moins un champ de formulaire Liste déroulante.

Si vous avez besoin d'aide pour créer votre formulaire, veuillez consulter cette documentation.

Une fois que vous avez ajouté votre champ Liste déroulante, cliquez sur l'onglet Avancé et sélectionnez Moderne pour le Style de la liste déroulante.

Personnalisation de la liste déroulante moderne

Il est maintenant temps d'ajouter l'extrait de code pour personnaliser le champ Liste déroulante moderne.

Si vous avez besoin d'aide pour ajouter des extraits à votre site, veuillez consulter ce tutoriel.

/**
 * Customize modern dropdown search results
 *
 * @link https://wpforms.com/developers/how-to-customize-the-modern-dropdown-field/
 */

function wpf_dev_modern_dropdown_search_results( $config, $forms ) {
	
	// Change 519 to an ID of your actual form or remove this condition to apply to all forms.
	if ( ! array_key_exists( 519, $forms ) ) {
        return $config;
	}
	
	// Change 6 to a large number to show all the matching results for every search (might impact performance).
	$config[ 'searchResultLimit' ] = 6;
	
	return $config;
}
add_filter( 'wpforms_field_select_choicesjs_config', 'wpf_dev_modern_dropdown_search_results', 10, 2 );

N'oubliez pas de changer le 519 pour qu'il corresponde à l'ID de votre propre formulaire.

Si vous n'êtes pas sûr de la façon de trouver l'ID de votre formulaire, veuillez consulter ce tutoriel.

Une fois que vous avez ajouté l'extrait et mis à jour l'ID du formulaire, la dernière étape consiste à définir searchResultLimit au nombre que vous souhaitez afficher pendant que vos utilisateurs tapent dans la zone de recherche. Dans notre exemple, nous voulons seulement afficher les 6 meilleurs résultats.

Et c'est tout ce dont vous avez besoin ! Souhaitez-vous également modifier le texte qui s'affiche lorsqu'aucun résultat n'est trouvé ? Jetez un œil à notre tutoriel sur Comment modifier le texte « Aucun résultat trouvé » dans le champ Liste déroulante moderne.

Filtre de référence

wpforms_field_select_choicesjs_config

FAQ

Q : Puis-je limiter la liste déroulante à seulement 2 éléments ?

R : Absolument ! Tout d'abord, vous devrez modifier le champ Liste déroulante moderne et, dans l'onglet Avancé, activer l'option pour permettre la Sélection de plusieurs options.

Une fois que vous avez activé cette option, vous pouvez ajouter cet extrait à votre site.

/**
 * Customize modern dropdown search results
 *
 * @link https://wpforms.com/developers/how-to-customize-the-modern-dropdown-field/
 */

function wpf_dev_modern_dropdown_select_limit( $config, $forms ) {
     
    // Change 519 to an ID of your actual form or remove this condition to apply to all forms.
    if ( ! array_key_exists( 519, $forms ) ) {
        return $config;
    }
     
    // Change 2 to a large number to show all the matching results for every search (might impact performance).
    $config[ 'maxItemCount' ] = 2;

    // Modify the 'maxItemText' to make it translatable when limiting the selections.
    $config['maxItemText'] = sprintf( __( 'Only %1$s values can be added', 'wpforms' ), $config['maxItemCount'] );
     
    return $config;
}
add_filter( 'wpforms_field_select_choicesjs_config', 'wpf_dev_modern_dropdown_select_limit', 10, 2 );

Q : Comment puis-je faire en sorte que ma recherche renvoie une correspondance plus exacte ?

R : Vous pouvez modifier la valeur du seuil pour être plus spécifique dans votre recherche. Ajoutez simplement cet extrait à votre site.

/**
 * Return more specific results
 *
 * @link https://wpforms.com/developers/how-to-customize-the-modern-dropdown-field/
 */

function wpf_dev_modern_dropdown_select_search( $config, $forms ) {
     
    // Providing more specific search results 
    // This will be added to all WPForms Modern Dropdown field for the search bar
    $config[ 'fuseOptions' ] = array(
		'threshold' =>  0.1
	);
      
    return $config;
}
add_filter( 'wpforms_field_select_choicesjs_config', 'wpf_dev_modern_dropdown_select_search', 10, 2 );