Lib da Semana - Select2

Essa semana começarei uma série de artigos apresentando bibliotecas e frameworks javascript e css.

Nessa semana abordaremos sobre o Select2. Como a própria biblioteca javascript se define: Select2 é uma alternativa JQuery para os <select> do HTML.

Permite você customizar os select boxes com suporte para busca, tokenização, dados remotos, scroll infinito entre outras características.

Para utilizar essa biblioteca é necessário incluir os arquivos css e js na sua página. Que pode ser feito:

  • Download local (manualmente) (não recomendado): Baixando pelo Github, que no momento em que escrevo está na versão 4.0.1 lançada em Novembro de 2015. Baixar 4.0.1. Após extrair o conteúdo da pasta, inclua os arquivos dist/css/select2.min.css e dist/js/select2.min.js (ou dist/js/select2.full.min.js para a versão completa contendo módulos adicionais) na sua página html.

    Exemplo:

{% highlight html %}

{% endhighlight %}
  • Utilizando CDN: A biblioteca é disponibilizada nas CDN cdnjs e jsDeliver. Inclua os links no seu HTML.

Exemplo:

{% highlight html %}

{% endhighlight %}
  • Via NPM:

Select2 também é disponibilizada como um pacote NPM. Para baixar Select2 como dependência NPM:

{% highlight bash %} npm install select2 –save {% endhighlight %}

A biblioteca será baixada para a sua pasta node_modules/select2.

  • Via Bower:

Para baixar via bower:

{% highlight bash %} bower install select2 –save {% endhighlight %}

Utilização#

Após incluir os respectivos arquivos css e js, você já pode começar a usar a biblioteca.

{% highlight javascript %} //inicie com as opções padrões $('.select2’).select2(); {% endhighlight %}

Assim, em todo elemento que for aplicada essa classe, terá o efeito do plugin.

{% highlight html %} {% endhighlight %}

Assim como em diversas outras bibliotecas, também é possivel personalizar, passando assim um objecto de configuração para o inicializador do plugin.

{% highlight javascript %} $('.select2’).select2({ placeholder: ‘Escolha seu país de nascimento’ }); {% endhighlight %}

No exemplo acima, definimos um placeholder (Aquele texto que dá uma dica ao usuário da página de como preencher aquele campo) para o componente.

É possível também definir outras opções, assim como tags, permitindo a inserção de vários valores no campo.

{% highlight javascript %} $('#languages’).select2({ placeholder: ‘Escolha suas linguagens favoritas’, tags: ‘true’ }); {% endhighlight %}

{% highlight html %} {% endhighlight %}

A opção allowClear permite com que o usuário a opção que ele selecionou ou já veio previamente selecionada.

{% highlight javascript %} $('.select2’).select2({ placeholder: ‘Escolha seu país de nascimento’, allowClear: true }); {% endhighlight %}

A biblioteca também carrega para o componente se for definida alguma opção no código HTML:

{% highlight html %} {% endhighlight %}

Select2 é uma biblioteca bastante completa e repleta de funcionalidades. Para conhecer outras opções disponíveis, consulte a documentação em inglês.

Abaixo um fiddle disponível se você quiser experimentar a biblioteca.

Espero ter disciplina para continuar postando dicas. Até a próxima.