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