Introduction

Sometimes we need to make a multiple selection on the same form but the extension/plugins could be a hard decision because of its sizes and other dependencies you bring with such as jQuery.

Today We'll talk about lightweight plugin to do multiple selection, and it called Virtual Select

Requisite

You need to know the basics about Livewire and Laravel blade engine.

Getting Started

From the Documentation

In a website DOM manipulation is expensive. If we try to render thousands of options to choose from in a dropdown, it would affect the performance and slow down the website.

To fix this problem, I have used the virtual scrolling concept to render dropdown options.

Install Dependencies

You can download the required CSS and JS files from the dist directory in the GitHub repository

Import Files

Import downloaded files (virtual-select.min.css and virtual-select.min.js) into your project.

1<link rel="stylesheet" href="path/to/virtual-select.min.css">
2 
3<script src="path/to/virtual-select.min.js">

Import below files to enable optional tooltip plugin. Tooltip would be used to show selected values and options text, if text is long and hidden by ellipsis.

1<link rel="stylesheet" href="path/to/tooltip.min.css">
2 
3<script src="path/to/tooltip.min.js">

If you want to use tooltip plug-in in your project, refer Tooltip Documentation

Install Via NPM

We can also install it via NPM

1npm install --save virtual-select-plugin

Import From node_modules

1<link rel="stylesheet" href="node_modules/virtual-select-plugin/dist/virtual-select.min.css">
2<script src="node_modules/virtual-select-plugin/dist/virtual-select.min.js"></script>
3 
4<!-- optional -->
5<link rel="stylesheet" href="node_modules/tooltip-plugin/dist/tooltip.min.css">
6<script src="node_modules/tooltip-plugin/dist/tooltip.min.js"></script>

Use Virtual Select Inside Livewire Project

Let's assume you have an users component, and you want to loop through all of your data, then select the chosen ones.

You can do it easily like so:

In You Component:

1...
2/** @var array */
3public $selectedUsers;

In your blade component, do the following:

 1<span class="text-gray-700">{{ __('Select Users') }}</span>
 2<div>
 3    <div id="users-select" wire:ignore></div>
 4</div>
 5 
 6<link rel="stylesheet" href="node_modules/virtual-select-plugin/dist/virtual-select.min.css">
 7<script src="node_modules/virtual-select-plugin/dist/virtual-select.min.js"></script>
 8 
 9<!-- optional -->
10<link rel="stylesheet" href="node_modules/tooltip-plugin/dist/tooltip.min.css">
11<script src="node_modules/tooltip-plugin/dist/tooltip.min.js"></script>
12 
13<script>
14let myOptions = [
15            @foreach($users as $user)
16                { label: "{{ $user->name }}", value: "{{ $user->id }}" },
17            @endforeach
18        ];
19    VirtualSelect.init({
20        ele: '#users-select',
21        options: myOptions,
22        multiple: true,
23        search: true,
24        placeholder: "{{__('Select Picked Orders')}}",
25        noOptionsText: "{{__('No results found')}}",
26    });
27 
28    let selectedUsers = document.querySelector('#users-select')
29    selectedUsers.addEventListener('change', () => {
30        let data = selectedUsers.value
31        @this.set('selectedUsers', data)
32    })
33</script>

Note

After submitting your form, the @this.set('selectedUsers', data) will return an array of IDs and you can be dealing with them however you like in your action method.

And That's it! You are good to go!

Conclusion

Today we learned about Virtual Select (Alternative for select2 plugin) and how to use it in your Laravel livewire project.

To Learn More about this plugin. Head over the Official Documentation to know more.

Hope this helped someone around, and if you have any question drop them below in the comments section, and I'm happy to answer them.