DEV Community

Dendi Handian
Dendi Handian

Posted on • Edited on

5 1

Adding Select2 to Laravel (The Laravel-Mix Way)

I will keep adding more js package that I use or you might use when you're using jQuery in the stack, this time is Select2. Select2 gives you additional input on the <select> element to filter the options. Now let's find out how to add it to your laravel app with Laravel-Mix.

Prerequisites to code along

Have your own laravel app and you ever use sass/scss and javascript with laravel (using laravel-mix). Not to mention, you already have jQuery installed in your app.

Installing Select2

Open your terminal, go to your laravel app, and here is the command to install:

npm install select2 --save-dev
Enter fullscreen mode Exit fullscreen mode

Applying Select2 JS

In your entrypoint or bootstrapped js file, you may have a similar code like this:

window._ = require('lodash');

try {

    window.$ = window.jQuery = require('jquery');

} catch (error) {
    console.log(error);
}
Enter fullscreen mode Exit fullscreen mode

now we just add the select2 below the jquery requirement and apply the select2 globally to any <select> element in your web (You may want to change it to your preference):

window._ = require('lodash');

try {

    window.$ = window.jQuery = require('jquery');

    require('select2');
    $('select').select2();

} catch (error) {
    console.log(error);
}
Enter fullscreen mode Exit fullscreen mode

Applying Select2 CSS

At this point, your select2 won't work unless you apply the style as well. In your sass/scss entrypoint file, add this line:

...

@import "~select2/dist/css/select2.css";

...
Enter fullscreen mode Exit fullscreen mode

Build!

npm run development
Enter fullscreen mode Exit fullscreen mode

or

npm run production
Enter fullscreen mode Exit fullscreen mode

Test it!

Let's put this simple select html element from w3schools in your web:

<label for="cars">Choose a car:</label>

<select name="cars" id="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
Enter fullscreen mode Exit fullscreen mode

And see it whether it applies or not by yourself, let me know if it doesn't 👻.


version used:

node v14.16.0
npm 6.14.11
laravel-mix 6.0

Enter fullscreen mode Exit fullscreen mode

Billboard image

Use Playwright to test. Use Playwright to monitor.

Join Vercel, CrowdStrike, and thousands of other teams that run end-to-end monitors on Checkly's programmable monitoring platform.

Get started now!

Top comments (2)

Collapse
 
wildtuna profile image
WildTuna

Thanks bro, you helped me a lot!

Collapse
 
dendihandian profile image
Dendi Handian

glad this old tips helped you

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay