Souhaitez-vous personnaliser le champ Modern Dropdown dans WPForms ? En utilisant ce champ, vous permettez à vos utilisateurs de taper dans une boîte de recherche et d'afficher les résultats en fonction des caractères saisis. Avec un petit extrait de PHP, vous pouvez contrôler le nombre de résultats qui s'affichent au fur et à mesure que les caractères sont saisis. Dans ce tutoriel, nous allons vous guider à travers chaque étape pour personnaliser le nombre de résultats qui s'affichent.
Création du formulaire
Tout d'abord, vous devez créer votre formulaire et ajouter vos champs avec au moins un champ de type Dropdown inclus dans le formulaire.
Si vous avez besoin d'aide pour créer votre formulaire, veuillez consulter cette documentation.
Une fois que vous avez ajouté votre champ déroulant, cliquez sur l'onglet Avancé et sélectionnez Moderne pour le style du champ déroulant.
Personnaliser le menu déroulant moderne
Il est maintenant temps d'ajouter l'extrait de code pour personnaliser le champ Modern Dropdown.
Si vous avez besoin d'aide pour ajouter des snippets à votre site, consultez 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 modifier le numéro 519 pour qu'il corresponde à votre propre numéro de formulaire.
Si vous ne savez pas comment trouver l'identifiant de votre formulaire, consultez ce tutoriel.
Une fois que vous avez ajouté le snippet et mis à jour l'ID du formulaire, la dernière étape consiste à définir le searchResultLimit en fonction du nombre de résultats que vous souhaitez afficher au fur et à mesure que les utilisateurs tapent dans le champ de recherche. Dans notre exemple, nous ne voulons afficher que les 6 premiers résultats.
Et c'est tout ce dont vous avez besoin ! Vous souhaitez également modifier le texte qui s'affiche lorsqu'aucun résultat n'est trouvé ? Jetez un coup d'œil à notre tutoriel sur Comment modifier le texte "Aucun résultat trouvé" dans le champ déroulant moderne.
Filtre de référence
wpforms_field_select_choicesjs_config
FAQ
Q : Puis-je limiter la liste déroulante à deux éléments seulement ?
R : Absolument ! Tout d'abord, vous devez modifier le champ Modern Dropdown et, dans l'onglet Advanced, activer l'option Multiple Options Selection (sélection d'options multiples).
Une fois cette option activée, 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 aboutisse davantage à une correspondance exacte ?
R : Vous pouvez modifier la valeur seuil pour être plus précis dans votre recherche. Il vous suffit d'ajouter 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 );