Como personalizar o campo suspenso moderno

Gostaria de personalizar o campo Modern Dropdown 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 snippet PHP, você pode controlar o número de resultados exibidos à medida que as chaves são inseridas. Neste tutorial, vamos guiá-lo através de cada passo para personalizar o número de resultados que são exibidos.

Criar o seu formulário

Em primeiro lugar, tem de criar o seu formulário e adicionar os seus campos com, pelo menos, um campo de formulário pendente incluído no formulário.

Crie o seu formulário e adicione-lhe um campo Dropdown

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

Depois de ter adicionado o seu campo pendente, clique no separador Avançadas e selecione Moderno para o estilo do pendente.

Definir o estilo do menu pendente para moderno

Personalizar o menu suspenso moderno

Agora é hora de adicionar o trecho 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 );

Não se esqueça de alterar o 519 para corresponder ao seu próprio ID do formulário.

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

Depois de ter adicionado o snippet e atualizado o ID do formulário, o último passo é definir o searchResultLimit para o número que pretende mostrar à medida que os utilizadores escrevem na caixa de pesquisa. No nosso exemplo, queremos mostrar apenas os 6 principais resultados.

Agora pode personalizar facilmente os modernos resultados de pesquisa do menu pendente

E é tudo o que precisa! Também gostaria de alterar o texto que é apresentado quando não são encontrados resultados? Veja o nosso tutorial sobre Como alterar o texto "Nenhum resultado encontrado" no campo suspenso Moderno.

Filtro de referência

wpforms_field_select_choicesjs_config

FAQ

P: Posso limitar o menu pendente para selecionar apenas 2 itens?

R: Sem dúvida! Em primeiro lugar, terá de editar o campo Modern Dropdown e, no separador Advanced (Avançadas ), alternar a opção para ativar Multiple Options Selection (Seleção de várias opções).

alternar o interrutor para ativar a Seleção de Múltiplas Opções

Depois de ativar esta opção, pode adicionar este 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 );

com este snippet, pode limitar as escolhas selecionadas no campo suspenso moderno

P: Como posso fazer com que a minha pesquisa tenha mais correspondências exactas?

R: Pode alterar o valor limite para ser mais específico na 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 );