Using Virtual Select Plugin For Virtual Scrolling With Laravel Livewire

Laravel 1 min read

Table of Content

    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.

    <link rel="stylesheet" href="path/to/virtual-select.min.css">
    
    <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.

    <link rel="stylesheet" href="path/to/tooltip.min.css">
    
    <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

    npm install --save virtual-select-plugin
    

    Import From node_modules

    <link rel="stylesheet" href="node_modules/virtual-select-plugin/dist/virtual-select.min.css">
    <script src="node_modules/virtual-select-plugin/dist/virtual-select.min.js"></script>
    
    <!-- optional -->
    <link rel="stylesheet" href="node_modules/tooltip-plugin/dist/tooltip.min.css">
    <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:

    ...
    /** @var array */
    public $selectedUsers;
    

    In your blade component, do the following:

    <span class="text-gray-700">{{ __('Select Users') }}</span>
    <div>
        <div id="users-select" wire:ignore></div>
    </div>
    
    <link rel="stylesheet" href="node_modules/virtual-select-plugin/dist/virtual-select.min.css">
    <script src="node_modules/virtual-select-plugin/dist/virtual-select.min.js"></script>
    
    <!-- optional -->
    <link rel="stylesheet" href="node_modules/tooltip-plugin/dist/tooltip.min.css">
    <script src="node_modules/tooltip-plugin/dist/tooltip.min.js"></script>
    
    <script>
    let myOptions = [
                @foreach($users as $user)
                    { label: "{{ $user->name }}", value: "{{ $user->id }}" },
                @endforeach
            ];
        VirtualSelect.init({
            ele: '#users-select',
            options: myOptions,
            multiple: true,
            search: true,
            placeholder: "{{__('Select Picked Orders')}}",
            noOptionsText: "{{__('No results found')}}",
        });
    
        let selectedUsers = document.querySelector('#users-select')
        selectedUsers.addEventListener('change', () => {
            let data = selectedUsers.value
            @this.set('selectedUsers', data)
        })
    </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.


    Related Tags

    About the Author

    Oussama's Profile Picture
    Oussama
    Full Stack Web Developer

    I'm a full stack web developer and telecommunications engineer who love to share knowledge and build stuff online!


    Comments

    Join Our Newsletter

    Subscribe to Our Newsletter and never miss our offers, latest news, Articles, etc.

    Our news letter sent once a week, every tuesday.