Cómo personalizar el campo desplegable moderno

¿Le gustaría personalizar el campo Desplegable moderno en WPForms? Al usar este campo, permite a sus usuarios escribir en un cuadro de búsqueda y muestra resultados basados en los caracteres introducidos y, con un pequeño fragmento de PHP, puede controlar el número de resultados que se muestran a medida que se introducen las claves. En este tutorial, le guiaremos paso a paso para personalizar el número de resultados que se muestran.

Creación de su formulario

Primero, deberá crear su formulario y agregar sus campos con al menos un campo de formulario Desplegable incluido en el formulario.

Si necesita ayuda para crear su formulario, revise esta documentación.

Una vez que haya agregado su campo Desplegable, haga clic en la pestaña Avanzado y seleccione Moderno para el Estilo del desplegable.

Personalización del desplegable moderno

Ahora es el momento de agregar el fragmento de código para personalizar el campo Desplegable moderno.

Si necesita ayuda para agregar fragmentos a su sitio, consulte este 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 );

Recuerde cambiar el 519 para que coincida con el ID de su propio formulario.

Si no está seguro de cómo encontrar el ID de su formulario, visite este tutorial.

Una vez que haya agregado el fragmento y actualizado el ID del formulario, el último paso es establecer searchResultLimit al número que desea mostrar mientras sus usuarios escriben en el cuadro de búsqueda. En nuestro ejemplo, solo queremos mostrar los 6 mejores resultados.

¡Y eso es todo lo que necesita! ¿También le gustaría cambiar el texto que se muestra cuando no se encuentran resultados? Eche un vistazo a nuestro tutorial sobre Cómo cambiar el texto de "No se encontraron resultados" en el campo desplegable moderno.

Filtro de Referencia

wpforms_field_select_choicesjs_config

Preguntas frecuentes

P: ¿Puedo limitar el desplegable a solo seleccionar 2 elementos?

R: ¡Absolutamente! Primero, deberá editar el campo Desplegable moderno y, en la pestaña Avanzado, activar la opción para habilitar la Selección de opciones múltiples.

Una vez que haya habilitado esta opción, puede agregar este fragmento a su sitio.

/**
 * 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 );

P: ¿Cómo puedo hacer que mi búsqueda devuelva una coincidencia más exacta?

R: Puede cambiar el valor umbral para ser más específico con su búsqueda. Simplemente agregue este fragmento a su sitio.

/**
 * 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 );