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!