Volete personalizzare il campo Modern Dropdown di WPForms? Utilizzando questo campo, si consente agli utenti di digitare in una casella di ricerca e di visualizzare i risultati in base ai caratteri immessi e, con un piccolo snippet PHP, si può controllare il numero di risultati che vengono visualizzati man mano che vengono inseriti i tasti. In questo tutorial, vi guideremo attraverso ogni passo per personalizzare il numero di risultati visualizzati.
Creazione del modulo
Per prima cosa, è necessario creare il modulo e aggiungere i campi con almeno un campo del modulo a discesa incluso nel modulo.
Se avete bisogno di aiuto per creare il vostro modulo, consultate questa documentazione.
Una volta aggiunto il campo a discesa, fare clic sulla scheda Avanzate e selezionare Moderno per lo stile del campo a discesa.
Personalizzazione del menu a tendina moderno
Ora è il momento di aggiungere lo snippet di codice per personalizzare il campo Modern Dropdown.
Se avete bisogno di aiuto per aggiungere gli snippet al vostro sito, consultate questo tutorial.
/**
* 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 );
Ricordate di modificare il codice 519 in modo che corrisponda al vostro ID modulo.
Se non siete sicuri di come trovare l'ID del vostro modulo, visitate questa guida.
Una volta aggiunto lo snippet e aggiornato l'ID del modulo, l'ultimo passo consiste nell'impostare il searchResultLimit sul numero che si desidera mostrare quando gli utenti digitano nella casella di ricerca. Nel nostro esempio, vogliamo mostrare solo i 6 risultati principali.
E questo è tutto ciò di cui avete bisogno! Volete anche cambiare il testo che viene visualizzato quando non vengono trovati risultati? Date un'occhiata al nostro tutorial su Come modificare il testo Nessun risultato trovato nel campo a discesa Modern.
Filtro di riferimento
wpforms_field_select_choicesjs_config
FAQ
D: Posso limitare il menu a tendina per selezionare solo 2 voci?
R: Assolutamente sì! Innanzitutto, occorre modificare il campo Modern Dropdown e, nella scheda Advanced, attivare l'opzione per abilitare la selezione di opzioni multiple.
Una volta attivata questa opzione, è possibile aggiungere questo snippet al proprio sito.
/**
* 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 );
D: Come posso fare in modo che la mia ricerca restituisca una corrispondenza più esatta?
R: È possibile modificare il valore di soglia per essere più specifici nella ricerca. Basta aggiungere questo snippet al sito.
/**
* 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 );