Caixas de seleção única
Select2 pode receber uma caixa de seleção normal como esta ...
Caixas de seleção múltipla
Select2 também oferece suporte a caixas de seleção de vários valores. O select abaixo é declarado com o múltiplo atributo.
Grupos de opções suspensas
Em HTML, <opção> os elementos podem ser agrupados envolvendo-os em
um <optgroup> elemento:
Desativando opções
Select2 irá lidar corretamente com as opções desativadas quando desabilitado atributo está definido) e de fontes remotas onde o objeto tem desativado:
verdade definir.
Desabilitando um controle Select2
Select2 responderá ao desabilitado atributo ativado
<selecione> elementos. Você também pode inicializar Select2 com
desativado: verdadeiro para obter o mesmo efeito.
Select2 com rótulos
Você pode e deve usar um <rótulo> com Select2, como qualquer outro <selecione> elemento.
Largura do contêiner
As duas caixas Select2 abaixo são estilizadas para 50% e 75% largura respectivamente para suportar design responsivo:
Temas
Select2 suporta temas personalizados usando o tema opção para que você possa estilizar Select2 para combinar com o resto do seu aplicativo.
Ajax (dados remotos)
Select2 vem com suporte AJAX integrado, usando métodos AJAX do jQuery. Neste exemplo, podemos procurar repositórios usando a API do GitHub:
Carregando dados da matriz
Você pode usar o dados opção de configuração para carregar opções suspensas de uma matriz local.
Seleção Automática
Select2 pode ser configurado para selecionar automaticamente o resultado atualmente destacado quando o menu suspenso é fechado usando o selecioneOnClose opção:
Permanecer aberto após a seleção
Select2 fechará automaticamente o menu suspenso quando um elemento for selecionado, semelhante ao que é feito com uma caixa de seleção normal. Você pode usar o
closeOnSelect opção para evitar que o menu suspenso feche quando um resultado é selecionado:
Posicionamento suspenso
O menu suspensoParent opção permite que você escolha um elemento alternativo para o menu suspenso ser anexado:
Limitando o número de seleções
As caixas de seleção de vários valores Select2 podem definir restrições em relação ao número máximo de opções que podem ser selecionadas. O select abaixo é declarado com o
múltiplo atributo com máximoSelectionLength nas opções select2.
Criação de opções dinâmicas
Além de um menu pré-preenchido de opções, o Select2 pode criar dinamicamente novas opções a partir da entrada de texto pelo usuário na caixa de pesquisa. Esse recurso é chamado de "marcação". Para ativar a marcação, defina o etiquetas opção para
verdadeiro:
Marcação com caixas de seleção de vários valores
A marcação também pode ser usada em caixas de seleção de vários valores. No exemplo abaixo, definimos o múltiplos="múltiplos" atributo em um controle Select2 que também possui tags: verdadeiro habilitado:
Espaços reservados de seleção única
Select2 suporta a exibição de um valor de espaço reservado usando o
espaço reservado opção de configuração. O valor do espaço reservado será exibido até que uma seleção seja feita.
Espaços reservados de seleção múltipla
Para seleções múltiplas, você deve não tem um vazio
<opção>elemento:
Espaços reservados de seleção padrão
Alternativamente, o valor do espaço reservado opção pode ser um objeto de dados que representa uma seleção padrão (<opção>). Neste caso o eu ia do objeto de dados deve corresponder ao
valor da seleção padrão correspondente.
Personalizando como os resultados são correspondidos
Quando os usuários filtram os resultados inserindo termos de pesquisa na caixa de pesquisa, Select2 usa uma "correspondência" interna para combinar os termos de pesquisa com os resultados. Você pode personalizar a maneira como Select2 corresponde aos termos de pesquisa especificando
um retorno de chamada para o combinador opção de configuração.
Opções agrupadas correspondentes
Somente objetos de primeiro nível serão passados para o combinador ligar de volta. Se você estiver trabalhando com dados aninhados, deverá iterar através do
crianças array e combiná-los individualmente. Isso permite uma correspondência mais avançada ao trabalhar com objetos aninhados, permitindo manipulá-los da maneira que desejar.
Comprimento mínimo do termo de pesquisa
Você pode definir um comprimento mínimo para o termo de pesquisa usando o
mínimoInputLength opção:
Comprimento máximo do termo de pesquisa
Você pode limitar o comprimento máximo dos termos de pesquisa usando o
máximoInputLength opção:
Adicionar programaticamente novas opções
Novas opções podem ser adicionadas a um controle Select2 programaticamente criando um novo Javascript Opção objeto e anexando-o ao controle:
Criar se não existir
Você pode usar .encontrar para selecionar a opção se ela já existir e criá-la caso contrário:
Usando o seletor jQuery
Os itens selecionados também podem ser acessados através do :selecionado Seletor jQuery:
Suporte RTL
Select2 funcionará em sites RTL se o diretório atributo está definido no
<selecione> ou qualquer pai dele. Você também pode inicializar Select2 com o diretório: "rtl" opção de configuração.
Destruindo o controle Select2
O destruir método removerá o widget Select2 do elemento de destino. Ele voltará ao padrão selecione controlar:
Abrindo o menu suspenso
Select2 irá acionar alguns eventos diferentes quando diferentes ações forem executadas usando o componente, permitindo adicionar ganchos personalizados e executar ações.
Abrindo/fechando o menu suspenso
Select2 irá acionar alguns eventos diferentes quando diferentes ações forem executadas usando o componente, permitindo adicionar ganchos personalizados e executar ações.
Métodos Select2
Select2 possui vários métodos integrados que permitem o controle programático do componente.
Métodos Select2
Select2 possui vários métodos integrados que permitem o controle programático do componente.