Como Personalizar o Campo de Dropdown Moderno

Gostaria de personalizar o campo Dropdown Moderno no WPForms? Ao usar este 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, você pode controlar o número de resultados exibidos. Neste tutorial, vamos guiá-lo por cada etapa para personalizar o número de resultados a serem exibidos.

Criando seu formulário

Primeiro, você precisará criar seu formulário e adicionar seus campos, incluindo pelo menos um campo de formulário Dropdown.

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

Depois de adicionar seu campo Dropdown, clique na aba Avançado e selecione Moderno para o Estilo do dropdown.

Personalizando o dropdown moderno

Agora é hora de adicionar o trecho de código para personalizar o campo Dropdown Moderno.

Se precisar de ajuda para adicionar trechos ao seu site, veja 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 ID do seu próprio formulário.

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

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

E é tudo o que você precisa! Gostaria também de alterar o texto exibido quando nenhum resultado for encontrado? Dê uma olhada em nosso tutorial sobre Como Alterar o Texto de Nenhum Resultado Encontrado no Campo Dropdown Moderno.

Filtro de Referência

wpforms_campo_selecionar_config_choicesjs

Perguntas Frequentes

P: Posso limitar o dropdown a selecionar apenas 2 itens?

R: Com certeza! Primeiro, você terá que editar o campo Dropdown Moderno e, na aba Avançado, ativar a opção para habilitar Seleção de Múltiplas Opções.

Depois de habilitar esta opção, você pode adicionar este trecho 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 minha pesquisa retornar uma correspondência mais exata?

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