Como incluir Select2 no formulário no Laravel 10
Neste tutorial, será apresentado como incluir o Select2 no formulário no Laravel 10.
Primeiramente, será demonstrado como incluir o Select2 no Laravel através da CDN.
Em seguida, será explicado como implementar pesquisar no campo select utilizando o Select2.
Por fim, será mostrado como implementar o Select2 no formulário cadastrar e editar.
Download do código fonte desenvolvido na aula: Download
Curso de Laravel: Mais Detalhes do Curso
Playlist completa sobre Laravel: Acessar
Receber as aulas gratuitas do curso de Laravel: Acessar
Para começar, é utilizado como base o projeto da aula "Como alterar a situação e manter na mesma página com Laravel 10".
No layout, ou seja, no arquivo 'resources/views/layouts/admin.blade.php', adicionado da CDN o CSS e JavaScript do Select2, o CSS do Bootstrap para o Select2, e também foi incluÃdo o jQuery.
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
É necessário criar a função no JavaScript para carregar o Select2 nos campos que possuem o seletor '.select2', e também acrescentar o tema do Bootstrap para o Select2.
// Quando carregar a página execute o select2
$(function () {
$('.select2').select2({
theme: 'bootstrap-5'
});
});
Para finalizar, basta adicionar o seletor 'select2' no campo para que o recurso de pesquisa seja apresentado no campo do tipo select.
<select name="situacao_conta_id" id="situacao_conta_id" class="form-select select2">
Baixar o código-fonte completo do projeto.
Bom, era isso. Espero que o tutorial tenha sido útil!