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