Download the PHP package gsferro/select2easy without Composer

Pacotes Dependências:

Instalação

1. Instalar o pacote via Composer:

2. Publicar o pacote:

Configuração

• Diretrivas blade, Coloque as no seu arquivo de layout

  • No final do header:

  • No final do body:

• Caso utilize framework bootstrap 5, adicione no header abaixo do @select2easyCss():

  • Mude ou na instancia do plugin ou diretamente no public/vendor/select2easy/js/select2easy.js:

  • Ou vc pode utilizar o @select2easyOptionsJs() para configurar o plugin para usar o theme e também já deixara utilizando via modal ou outro parent, basta adicionar antes select2easyJs()

  • É necesário fazer um ajuste no css para quando o select2 estiver disabled e no tamanho do input

  • Caso queira implementar um css avançado no theme, adicione:

  • É necessário ajustar o css para funcionar com as cores do validate:
• Caso você queira aplicar a instância do plugin select2 em todas as tags select, adicione após select2easyJs():

Implementação

• Você pode implementar quantos metodos quiser, para chamar a modelo em varias ocaciões dentro do projeto

  • Ex: Model User
  • sl2Nome: usando o nome como busca
  • sl2Email: usando o nome como busca
  • sl2Login: usando o nome como login
• Implemente na model a trait Select2Easy

• Crie uma stact function Sl2<NomeMetodo> que sera chamado na implementação em data-sl2_method ou { sl2_method : ""}

• Na View:

  • no select coloque a class select2Easy (required)
  • coloque o attributo data-sl2_method = "nomeDoMetodoEstaticoDaModel"
  • coloque o attributo data-sl2_model = 'caminho\para\Model'
  • ou coloque o attributo data-sl2_hash = "{{ Crypt::encryptString('caminho\para\Model') }}"
  • Exemplo:

• Instancie o plugin no select2easy

• Model
  • Import usando:
  • Coloque a trait
  • crie o nomeDoMetodoEstaticoDaModel passando o term e page
  • Exemplo:

Cascade (select2 parents/dependent)

Tem momentos que é necessário que um select seja dependente de outro para poder exibir os dados pré filtrados, por exemplo Estado > Cidades. Para tal, basta colocar o atributo data-sl2_child no select2 pai (parent) o id do select2 dofilho (child):

• Exemplo:

• Na model: É necessário ter o scope do pai e ser inicializado o array $scopeParentAndId contendo como chave o scope e o value o paramentro $parentId, e passar para o self::select2easy, exemplo:

  • Caso vc esteja usando as versões do php >8, pode utilizar o Named Arguments:

  • Inspirado neste javascript select2-cascade.js

Prefixos e Sufixos (pode ser um relacionamento ou coluna)

• Prefixo: adicionado antes do texto do select2
• Sufixo: adicionado depois do texto do select2

Use Templating (Markups)

• O pacote select2easy esta preparado para utilizar o recurso de Templating, que permite formatar o título (text) e o html exibido no plugin select2.
• Para isso, basta criar na model os metodos tanto para o text quanto para o html, e o plugin fará o resto.
• O text é o que sera exibido no select apos a escolha e o html é o que sera exibido quando abre a busca de seleção ao retorno no ajax.
• Você também pode utilizar separadamente tanto o text quanto html, basta passar para o array $markups o item desejado.

• Cada método receberá 2 parametros no momento de ser invocado pelo pacote: string $text e Model $model, sendo a instancia da a propria model ($this) utilizada, e estes metodos devem retornar o html que sera rendereziado.

  • Exemplo de uso:

  • Exemplo de metodo para o html:

    • Renderização do metodo:

  • Exemplo de metodo para o text:

  • Renderização do metodo:

  • Como você pode ter multiplos metodos para usar o select2easy na model, você pode utilizar varios tipos de formatação, conforme a necessidade ou fazer reusos de metodos e views.

Selected

• Links do plugin

  • https://select2.org/data-sources/ajax#default-pre-selected-values
  • https://select2.org/programmatic-control/add-select-clear-items
• melhor opção:

Para Laravel > 7

Como a ideia, pelo menos nas versões v1.* do pacote, é manter a compatiblidade com todas as versões do Laravel, desde a L5 até a atual L11, não esta disponivel um component, mas fica aqui uma sugestão e possivel disponibilzação para as proximas versões de um component completamente funcional (baseado no bootstrap 5):

• Crie, caso não exista: resources/views/components/forms/label.blade.php

• Crie: resources/views/components/select2/easy.blade.php

  • Ou publique o component

• Recomendo criar novos components encapsulando-o, Exemplo de uso:

  • resources/views/components/select2/category.blade.php
  • No formulário:

Troubleshooting

• Erro: "Select2easy não está funcionando":

  1. Verifique se o pacote está instalado corretamente
  2. Verifique se o arquivo de layout está configurado corretamente
• Erro: "Select2easy não está aparecendo"
  1. Verifique se o select2easy está sendo chamado corretamente
  2. Verifique se o tema está configurado corretamente
  3. Verifique se a model esta configurado corretamente
  4. Verifique se o html esta corretamente implementado

License

Laravel Localization is an open-sourced laravel package licensed under the MIT license.