Select2: Seleção mais eficientes com a sugestão de resultados

Imagine ter que procurar sua cidade em uma lista de seleção com todas as cidades do Brasil ou so mundo, pode ser bastante desagradável e demorado. No entanto existe uma solução boa para tornar a seleção mais eficiente. Estou me referindo aqueles campo que ao ir escrevendo ele vai sugerindo resultados.

O campo “convencional”

Um <select> em html convencional é assim:

<select id="estado" name="estado">
    <option value="AC">Acre</option>
    <option value="AL">Alagoas</option>
    <option value="AP">Amapá</option>
    <option value="AM">Amazonas</option>
    <option value="BA">Bahia</option>
    <option value="CE">Ceará</option>
    <option value="DF">Distrito Federal</option>
    <option value="ES">Espírito Santo</option>
    <option value="GO">Goiás</option>
    <option value="MA">Maranhão</option>
    <option value="MT">Mato Grosso</option>
    <option value="MS">Mato Grosso do Sul</option>
    <option value="MG">Minas Gerais</option>
    <option value="PA">Pará</option>
    <option value="PB">Paraíba</option>
    <option value="PR">Paraná</option>
    <option value="PE">Pernambuco</option>
    <option value="PI">Piauí</option>
    <option value="RJ">Rio de Janeiro</option>
    <option value="RN">Rio Grande do Norte</option>
    <option value="RS">Rio Grande do Sul</option>
    <option value="RO">Rondônia</option>
    <option value="RR">Roraima</option>
    <option value="SC">Santa Catarina</option>
    <option value="SP">São Paulo</option>
    <option value="SE">Sergipe</option>
    <option value="TO">Tocantins</option>
    <option value="ES">Estrangeiro</option>
</select>

Resultado sem Select2:

Acre Alagoas Amapá Amazonas Bahia Ceará Distrito Federal Espírito Santo Goiás Maranhão Mato Grosso Mato Grosso do Sul Minas Gerais Pará Paraíba Paraná Pernambuco Piauí Rio de Janeiro Rio Grande do Norte Rio Grande do Sul Rondônia Roraima Santa Catarina São Paulo Sergipe Tocantins Estrangeiro

Para o mesmo <select> com Select2

Acre Alagoas Amapá Amazonas Bahia Ceará Distrito Federal Espírito Santo Goiás Maranhão Mato Grosso Mato Grosso do Sul Minas Gerais Pará Paraíba Paraná Pernambuco Piauí Rio de Janeiro Rio Grande do Norte Rio Grande do Sul Rondônia Roraima Santa Catarina São Paulo Sergipe Tocantins Estrangeiro

Primeiro passo

Importe os arquivos do Select 2 para seu projeto, você pode baixar direto do repositório ou utilizar CDN:

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>

Uma prática bacana é enfileirar os styles e scripts pelo function:

wp_enqueue_style('select2', 'https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css');
	wp_enqueue_script( 'select2', 'https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js');

Para saber mais como inserir “via functions” veja este artigo.

Segundo passo

Prepare seu HTML, inserindo alguma classe no <select>, neste caso incluí a basico-select2:

<select id="estado" class="basico-select2" name="estado">
...

Essa classe é inserida para que nosso próximo passo passa “encontrar” esse select.

Terceiro passo

Crie um script para “ativar” o Select2:

<script>
	$(document).ready(function() {
		$('.basico-select2').select2();
	});
</script>

Estou colocando este script no footer.php, mas também poderia ser criado um arquivo .js com ele e então ser enfileirado no functions.php como foi feito com os arquivos do Select2.

Seleção mais eficiente

Este exemplo demonstra apenas a função mais simples do Select2, você pode acessar o site para ter acesso a documentação completa, e tornar suas seleções mais eficientes.

Como por exemplo “montar” sua seleção por um json e customizar o idioma da biblioteca ou até mesmo apresentar imagens no campo da seleção.

Muito legal essa seleção mais eficiente com a sugestão de resultado, vai facilitar a vida do visitante do seu site.

Curtiu este artigo? Comenta nos campos abaixo.

Flyer vector created by rawpixel.com – www.freepik.com

Deixe um comentário