Como personalizar o campo suspenso moderno

Você gostaria de personalizar o campo Modern Dropdown no WPForms? Ao usar esse campo, você permite que seus usuários digitem em uma caixa de pesquisa e exibam resultados com base nos caracteres inseridos e, com um pequeno trecho de PHP, é possível controlar o número de resultados exibidos à medida que as teclas são inseridas. Neste tutorial, vamos orientá-lo em cada etapa para personalizar o número de resultados exibidos.

Criando seu formulário

Primeiro, você precisará criar seu formulário e adicionar seus campos com pelo menos um campo de formulário Dropdown incluído no formulário.

Se precisar de ajuda para criar seu formulário, consulte esta documentação.

Depois de adicionar o campo Dropdown, clique na guia Advanced (Avançado ) e selecione Modern (Moderno ) para o estilo do dropdown.

Personalização do menu suspenso moderno

Agora é hora de adicionar o snippet de código para personalizar o campo Modern Dropdown.

Se precisar de ajuda para adicionar snippets ao seu site, 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 );

Lembre-se de alterar o 519 para corresponder ao seu próprio ID de formulário.

Se não tiver certeza de como encontrar o ID do formulário, consulte este tutorial.

Depois de adicionar o snippet e atualizar o ID do formulário, a última etapa é definir o searchResultLimit como o número que você deseja mostrar à medida que os usuários digitam na caixa de pesquisa. Em nosso exemplo, queremos mostrar apenas os 6 principais resultados.

E isso é tudo o que você precisa! Você também gostaria de alterar o texto que é exibido quando nenhum resultado é encontrado? Dê uma olhada no nosso tutorial sobre Como alterar o texto "Nenhum resultado encontrado" no campo suspenso Moderno.

Filtro de referência

wpforms_field_select_choicesjs_config

PERGUNTAS FREQUENTES

P: Posso limitar o menu suspenso para selecionar apenas dois itens?

R: Com certeza! Primeiro, você terá que editar o campo Modern Dropdown e, na guia Advanced (Avançado ), alternar a opção para ativar a Multiple Options Selection (Seleção de várias opções).

Depois de ativar essa opção, você poderá adicionar esse snippet ao seu 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 );

P: Como posso fazer com que minha pesquisa retorne mais correspondências exatas?

R: Você pode alterar o valor limite para ser mais específico em sua pesquisa. Basta adicionar este snippet ao seu 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 );