Come personalizzare il campo dropdown moderno

Vuoi personalizzare il campo Dropdown Moderno in WPForms? Utilizzando questo campo, permetti ai tuoi utenti di digitare in una casella di ricerca e visualizzare i risultati in base ai caratteri inseriti e, con un piccolo snippet PHP, puoi controllare il numero di risultati visualizzati man mano che vengono inseriti i caratteri. In questo tutorial, ti guideremo passo dopo passo per personalizzare il numero di risultati visualizzati.

Creazione del tuo modulo

Innanzitutto, dovrai creare il tuo modulo e aggiungere i tuoi campi, includendo almeno un campo modulo Dropdown.

Se hai bisogno di aiuto per creare il tuo modulo, consulta questa documentazione.

Una volta aggiunto il tuo campo Dropdown, fai clic sulla scheda Avanzate e seleziona Moderno per lo Stile del dropdown.

Personalizzazione del dropdown moderno

Ora è il momento di aggiungere lo snippet di codice per personalizzare il campo Dropdown Moderno.

Se hai bisogno di aiuto per aggiungere snippet al tuo sito, consulta 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 );

Ricorda di cambiare il 519 per farlo corrispondere all'ID del tuo modulo.

Se non sei sicuro di come trovare l'ID del tuo modulo, visita questo tutorial.

Una volta aggiunto lo snippet e aggiornato l'ID del modulo, l'ultimo passaggio consiste nell'impostare searchResultLimit al numero che desideri mostrare mentre gli utenti digitano nella casella di ricerca. Nel nostro esempio, vogliamo mostrare solo i 6 migliori risultati.

E questo è tutto ciò di cui hai bisogno! Vuoi anche cambiare il testo visualizzato quando non vengono trovati risultati? Dai un'occhiata al nostro tutorial su Come cambiare il testo "Nessun risultato trovato" nel campo Dropdown Moderno.

Filtro di Riferimento

wpforms_field_select_choicesjs_config

FAQ

D: Posso limitare il dropdown a selezionare solo 2 elementi?

R: Assolutamente! Innanzitutto, dovrai modificare il campo Dropdown Moderno e, nella scheda Avanzate, attivare l'opzione per abilitare la Selezione di Opzioni Multiple.

Una volta abilitata questa opzione, puoi aggiungere questo snippet al tuo 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: Puoi modificare il valore di soglia per essere più specifico con la tua ricerca. Aggiungi semplicemente questo snippet al tuo 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 );