Como Personalizar o Campo de Lista Suspensa Moderna

Gostaria de personalizar o campo Lista Suspensa Moderna no WPForms? Ao usar este campo, permite que os seus utilizadores escrevam numa caixa de pesquisa e exibem resultados com base nos caracteres introduzidos e, com um pequeno trecho de PHP, pode controlar o número de resultados que são exibidos à medida que as teclas são introduzidas. 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

Primeiro, terá de criar o seu formulário e adicionar os seus campos com pelo menos um campo de formulário Lista Suspensa incluído no formulário.

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

Assim que tiver adicionado o seu campo Lista Suspensa, clique no separador Avançadas e selecione Moderno para o Estilo da lista suspensa.

Personalizar a lista suspensa moderna

Agora é hora de adicionar o trecho de código para personalizar o campo Lista Suspensa Moderna.

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

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

Depois de ter adicionado o trecho e atualizado o ID do formulário, o último passo é definir o searchResultLimit para o número que deseja mostrar enquanto os seus utilizadores escrevem na caixa de pesquisa. No nosso exemplo, queremos mostrar apenas os 6 melhores resultados.

E é tudo o que precisa! Gostaria também de alterar o texto que é exibido quando nenhum resultado é encontrado? Dê uma vista de olhos ao nosso tutorial sobre Como Alterar o Texto de Nenhum Resultado Encontrado no Campo Lista Suspensa Moderna.

Filtro de Referência

wpforms_field_select_choicesjs_config

FAQ

P: Posso limitar a lista suspensa a selecionar apenas 2 itens?

R: Absolutamente! Primeiro, terá de editar o campo Lista Suspensa Moderna e, no separador Avançadas, ativar a opção para permitir a Seleção de Múltiplas Opções.

Depois de ativar esta opção, 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 com que a minha pesquisa retorne uma correspondência mais exata?

R: Pode alterar o valor do limiar para ser mais específico com a 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 );